<repo_name>rkhayyat/nativescript-moon-phase<file_sep>/moon-phase.android.ts
import { Common, MoonPhaseBase, Utils, dateProperty } from './moon-phase.common';
import {moonImage} from './moonImages';

export class Hijri extends Common {

}
export class MoonPhase extends MoonPhaseBase {
    constructor() {
        super();
    
    }

    [dateProperty.setNative](value) {
        this.src = moonImage[Utils.getDay(value, 0)];
        this.width = 100;
    };

}<file_sep>/language.d.ts
export declare const Arabic: {
    wdNames: string[];
    MonthNames: string[];
};
export declare const English: {
    wdNames: string[];
    MonthNames: string[];
};
<file_sep>/README.md
[![npm](https://img.shields.io/npm/v/nativescript-moon-phase.svg)](https://www.npmjs.com/package/nativescript-moon-phase)
[![npm](https://img.shields.io/npm/dt/nativescript-moon-phase.svg?label=npm%20downloads)](https://www.npmjs.com/package/nativescript-moon-phase)
[![twitter: @rakhayyat](https://img.shields.io/badge/twitter-%40rakhayyat-2F98C1.svg)](https://twitter.com/rakhayyat)

[![NPM](https://nodei.co/npm/nativescript-moon-phase.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/nativescript-moon-phase/)

# Nativescript moon phase plugin
This plugin is a complementary to my previous one that converts from gregorian to hijri dates https://github.com/rkhayyat/nativescript-hijri

# Nativescript-moon-phase

Moon Phase plugin allows you show the moon phase for a given date. 
<p align="center">
  <img src="https://github.com/rkhayyat/nativescript-moon-phase/blob/master/screenshot/nativescript-moon.gif" width="300"/>
</p>

## Installation

```javascript
tns plugin add nativescript-moon-phase
```

## Usage 

## Typescript NativeScript

### XML
```xml
<Page 
 xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:customControls="nativescript-moon-phase"
 loaded="pageLoaded" class="page">
  <StackLayout class="p-20">
  <customControls:MoonPhase items="{{ DateValue }}" />
    <DatePicker id="date" loaded="onPickerLoaded" dateChange="onDateChanged" verticalAlignment="center">
    </DatePicker>
    <Button text="Valider" tap="see"></Button>
  </StackLayout>
</Page>
```

### main-view-model
```typescript
import {Observable} from 'tns-core-modules/data/observable';
import {Hijri} from 'nativescript-moon-phase';

export class HelloWorldModel extends Observable {
public monthText : string;
public DateValue: Date;

  constructor(currentDate) {
    super();

    this.DateValue = currentDate;
  }
}
```
### main-page
```typescript
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { DatePicker } from "tns-core-modules/ui/date-picker";
import {HelloWorldModel} from './main-view-model';
var view = require("ui/core/view");
var MainViewModel = require("./main-view-model");

let page;

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    page = <pages.Page>args.object;
    page.bindingContext = new HelloWorldModel(new Date());
}

exports.see = function(args) {
    var sender = args.object;
    var parent = sender.parent;
    var year = view.getViewById(parent,"date").year;
    var month = view.getViewById(parent,"date").month
    var day = view.getViewById(parent,"date").day;
    var convertDate = new Date(year, month-1, day);
    page.bindingContext = new HelloWorldModel(convertDate);
}
```

## API

### Methods

| Method | Return | Description |
| --- | --- | --- |
| `items` | `Date` | Date passed to show the corseponding moon phase image. |

## NativeBaguette 🥖

[<img alt="<NAME>" src="https://avatars1.githubusercontent.com/u/10686043?v=3&s=400" width="117">](https://github.com/rkhayyat) |
:---: |
[rkhayyat](https://github.com/rkhayyat)  |

<file_sep>/index.d.ts
import { Common } from './moon-phase.common';
export declare class Hijri extends Common {
  constructor(date, shift); 
    dayOfWeekText: string;
    dayOfWeek: string;
    dayOfMonth:number;
    month:number;
    monthText:string;
    year:number 
  
}

export declare interface islamicDateObject {
    dayOfWeekText: string;
    dayOfWeek: string;
    dayOfMonth:number;
    month:number;
    monthText:string;
    year:number   
}
<file_sep>/moon-phase.common.ts
import { Observable } from 'data/observable';
import { Property } from "tns-core-modules/ui/core/properties";
import * as app from 'application';
import {Arabic, English} from './language';
import {HijriFunction} from './basecal';
import {Image} from 'tns-core-modules/ui/image';


export class Common extends Observable {
  public hijri_ar: islamicDateObject;
  public hijri_en: islamicDateObject;
  public getYear:number;
  public getMonth:number;
  public getDay:number;
  public getMonthName_Ar:string;
  public getDayName_Ar:string;
  public getMonthName_En:string;
  public getDayName_En:string;

  constructor(date, shift) {
    super();
    this.hijri_ar = Utils.Hijri_Date_AR(date, shift);
    this.hijri_en = Utils.Hijri_Date_EN(date, shift);
    this.getYear = Utils.getYear(date, shift);
    this.getMonth = Utils.getMonth(date, shift);
    this.getDay = Utils.getDay(date, shift);
    this.getMonthName_Ar = Utils.getMonthName_Ar(date, shift);
    this.getDayName_Ar = Utils.getDayName_Ar(date, shift);
    this.getMonthName_En = Utils.getMonthName_En(date, shift);
    this.getDayName_En = Utils.getDayName_En(date, shift);
  }
}



export class Utils {  
  public static getYear(date, shift):number{
    let _hijriFunction = new HijriFunction();
    let year:number = _hijriFunction.basecal(date, shift)[7];
    return year;
  }
  public static getMonth(date, shift):number{
    let _hijriFunction = new HijriFunction();
    let month:number = _hijriFunction.basecal(date, shift)[6]+1;
    return month;
  }
  public static getDay(date, shift):number{
    let _hijriFunction = new HijriFunction();
    let day:number = _hijriFunction.basecal(date, shift)[5];
    return day;
  }
  public static getMonthName_Ar(date, shift):string{
    let _hijriFunction = new HijriFunction();
    let monthName_Ar:string = Arabic.MonthNames[_hijriFunction.basecal(date, shift)[6]];
    return monthName_Ar;
  }
  public static getDayName_Ar(date, shift):string{
    let _hijriFunction = new HijriFunction();
    let dayName_Ar:string = Arabic.wdNames[_hijriFunction.basecal(date, shift)[4]];
    return dayName_Ar;
  }
  public static getMonthName_En(date, shift):string{
    let _hijriFunction = new HijriFunction();
    let monthName_En:string = English.MonthNames[_hijriFunction.basecal(date, shift)[6]];
    return monthName_En;
  }
  public static getDayName_En(date, shift):string{
    let _hijriFunction = new HijriFunction();
    let dayName_En:string = English.wdNames[_hijriFunction.basecal(date, shift)[4]];
    return dayName_En;
  }

  public static Hijri_Date_AR(date, shift): islamicDateObject {
    let _hijriFunction = new HijriFunction();
    let hijriDate:islamicDateObject;
    hijriDate = {
		            dayOfWeekText:Arabic.wdNames[_hijriFunction.basecal(date, shift)[4]] ,
		            dayOfWeek:_hijriFunction.basecal(date, shift)[4]+1,
		            dayOfMonth:_hijriFunction.basecal(date, shift)[5],
		            month:_hijriFunction.basecal(date, shift)[6]+1,
		            monthText:Arabic.MonthNames[_hijriFunction.basecal(date, shift)[6]],
		            year:_hijriFunction.basecal(date, shift)[7]
              };
    return hijriDate;
  }

  public static Hijri_Date_EN(date, shift): islamicDateObject {
    let hijriDate:islamicDateObject;
    let _hijriFunction = new HijriFunction();
    hijriDate = {
		            dayOfWeekText:English.wdNames[_hijriFunction.basecal(date, shift)[4]] ,
		            dayOfWeek:_hijriFunction.basecal(date, shift)[4]+1,
		            dayOfMonth:_hijriFunction.basecal(date, shift)[5],
		            month:_hijriFunction.basecal(date, shift)[6]+1,
		            monthText:English.MonthNames[_hijriFunction.basecal(date, shift)[6]],
		            year:_hijriFunction.basecal(date, shift)[7]
              };
    return hijriDate;
  }
}

export class islamicDateObject {
    dayOfWeekText: string;
    dayOfWeek: number;
    dayOfMonth:number;
    month:number;
    monthText:string;
    year:number
} 



export class MoonPhaseBase extends  Image {
  
}


export const dateProperty = new Property<MoonPhaseBase, any[]>({
  name: "items",
  equalityComparer: (a: any[], b: any[]) => !a && !b && a.length === b.length
});

dateProperty.register(MoonPhaseBase);<file_sep>/moonImages.d.ts
export declare const moonImage: string[];
<file_sep>/demo/app/main-page.ts
import * as observable from 'tns-core-modules/data/observable';
import * as pages from 'tns-core-modules/ui/page';
import { DatePicker } from "tns-core-modules/ui/date-picker";
import {HelloWorldModel} from './main-view-model';
var view = require("ui/core/view");
var MainViewModel = require("./main-view-model");

let page;


// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: observable.EventData) {
    page = <pages.Page>args.object;
    page.bindingContext = new HelloWorldModel(new Date());
    // Get the event  sender
}

export function onPickerLoaded(args) {
    let datePicker = <DatePicker>args.object;
    datePicker.year = (new Date()).getFullYear();
    datePicker.month = (new Date()).getMonth() + 1;
    datePicker.day = (new Date()).getDate();
    datePicker.minDate = new Date(1975, 0, 29);
    datePicker.maxDate = new Date(2045, 4, 12);
    
}

exports.see = function(args) {
    var sender = args.object;
    var parent = sender.parent;
    var year = view.getViewById(parent,"date").year;
    var month = view.getViewById(parent,"date").month
    var day = view.getViewById(parent,"date").day;
    // this.DateValue = new Date(year, month-1, day);
    var convertDate = new Date(year, month-1, day);
    page.bindingContext = new HelloWorldModel(convertDate);
}<file_sep>/basecal.ts
export class HijriFunction {
    basecal(date, adjust){
        var today = date;
        if(adjust) {
          var adjustmili = 1000*60*60*24*adjust;
          var todaymili = today.getTime()+adjustmili;
          today = new Date(todaymili);
        }
        var wd = date.getDay() + 1;
  
        var day = today.getDate();
        var month = today.getMonth();
        var year = today.getFullYear();
        var m = month+1;
        var y = year;
        if(m<3) {
          y -= 1;
          m += 12;
        }
  
        var a = Math.floor(y/100.0);
        var b = 2-a+Math.floor(a/4.0);
        if(y<1583) b = 0;
        if(y===1582) {
          if(m>10)  b = -10;
          if(m===10) {
            b = 0;
            if(day>4) b = -10;
          }
        }
  
        var jd = Math.floor(365.25*(y+4716))+Math.floor(30.6001*(m+1))+day+b-1524;
  
        b = 0;
        if(jd>2299160){
          a = Math.floor((jd-1867216.25)/36524.25);
          b = 1+a-Math.floor(a/4.0);
        }
        var bb = jd+b+1524;
        var cc = Math.floor((bb-122.1)/365.25);
        var dd = Math.floor(365.25*cc);
        var ee = Math.floor((bb-dd)/30.6001);
        day =(bb-dd)-Math.floor(30.6001*ee);
        month = ee-1;
        if(ee>13) {
          cc += 1;
          month = ee-13;
        }
        year = cc-4716;
  
        var iyear = 10631.0/30.0;
        var epochastro = 1948084;
        // var epochcivil = 1948085; Not used
  
        var shift1 = 8.01/60.0;
  
        var z = jd-epochastro;
        var cyc = Math.floor(z/10631.0);
        z = z-10631*cyc;
        var j = Math.floor((z-shift1)/iyear);
        var iy = 30*cyc+j;
        z = z-Math.floor(j*iyear+shift1);
        var im = Math.floor((z+28.5001)/29.5);
        if(im===13) {
          im = 12;
        }
        var id = z-Math.floor(29.5001*im-29);
  
        var myRes = new Array(8);
  
        myRes[0] = day; //calculated day (CE)
        myRes[1] = month-1; //calculated month (CE)
        myRes[2] = year; //calculated year (CE)
        myRes[3] = jd-1; //julian day number
        myRes[4] = wd-1; //weekday number
        myRes[5] = id; //islamic date
        myRes[6] = im-1; //islamic month
        myRes[7] = iy; //islamic year
      return myRes;
  }
     
}<file_sep>/basecal.d.ts
export declare class HijriFunction {
    basecal(date: any, adjust: any): any[];
}
<file_sep>/moon-phase.android.d.ts
import { Common, MoonPhaseBase } from './moon-phase.common';
export declare class Hijri extends Common {
}
export declare class MoonPhase extends MoonPhaseBase {
    constructor();
}
<file_sep>/demo/app/main-view-model.ts
import {Observable} from 'tns-core-modules/data/observable';
import {Hijri} from 'nativescript-moon-phase';


export class HelloWorldModel extends Observable {
/*public dayWeekText :string;
public dayWeekNumber : number;
public dayMonthNumber : number;*/
public monthText : string;
/*public monthNumber : number;
public yearNumber :number;
public hijri: Hijri;*/
public DateValue: Date;

  constructor(currentDate) {
    super();

    /*this.hijri = new Hijri(currentDate,0);
    this.dayWeekText =this.hijri.getDayName_Ar;
    this.dayMonthNumber = this.hijri.hijri_ar.dayOfMonth;
    this.monthText = this.hijri.getMonthName_Ar;
    this.monthNumber = this.hijri.getMonth;
    this.yearNumber =this.hijri.getYear;*/
    this.DateValue = currentDate;
  }

}<file_sep>/moon-phase.common.d.ts
import { Observable } from 'data/observable';
import { Property } from "tns-core-modules/ui/core/properties";
import { Image } from 'tns-core-modules/ui/image';
export declare class Common extends Observable {
    hijri_ar: islamicDateObject;
    hijri_en: islamicDateObject;
    getYear: number;
    getMonth: number;
    getDay: number;
    getMonthName_Ar: string;
    getDayName_Ar: string;
    getMonthName_En: string;
    getDayName_En: string;
    constructor(date: any, shift: any);
}
export declare class Utils {
    static getYear(date: any, shift: any): number;
    static getMonth(date: any, shift: any): number;
    static getDay(date: any, shift: any): number;
    static getMonthName_Ar(date: any, shift: any): string;
    static getDayName_Ar(date: any, shift: any): string;
    static getMonthName_En(date: any, shift: any): string;
    static getDayName_En(date: any, shift: any): string;
    static Hijri_Date_AR(date: any, shift: any): islamicDateObject;
    static Hijri_Date_EN(date: any, shift: any): islamicDateObject;
}
export declare class islamicDateObject {
    dayOfWeekText: string;
    dayOfWeek: number;
    dayOfMonth: number;
    month: number;
    monthText: string;
    year: number;
}
export declare class MoonPhaseBase extends Image {
}
export declare const dateProperty: Property<MoonPhaseBase, any[]>;
