Vitamin

Vitamin/src/app/app.module.ts

@@ -11,6 +11,8 @@ import { RegisterPage } from '../pages/register/register';
 import { AlarmPage }from '../pages/alarm/alarm';
 
 import { LocalNotifications } from '@ionic-native/local-notifications';
+import { VitaminCPage } from '../pages/vitamin-c/vitamin-c';
+import { ZincPage } from '../pages/zinc/zinc';
 
 
 
@@ -20,7 +22,9 @@ import { LocalNotifications } from '@ionic-native/local-notifications';
     HomePage,
     CommonVitaminsPage,
     RegisterPage,
-    AlarmPage
+    AlarmPage,
+    VitaminCPage,
+    ZincPage
   ],
   imports: [
     BrowserModule,
@@ -32,7 +36,9 @@ import { LocalNotifications } from '@ionic-native/local-notifications';
     HomePage,
     CommonVitaminsPage,
     RegisterPage,
-    AlarmPage
+    AlarmPage,
+    VitaminCPage,
+    ZincPage
   ],
   providers: [
     StatusBar,

Vitamin/src/pages/alarm/alarm.html

@@ -9,8 +9,170 @@
 </ion-header>
 
 
-<ion-content padding>
+<ion-content text-center class = "login"> 
+
+  <!-- This adds blank space -->
+  <div style="clear:both; height:50px"></div>
+
+  <h1 class="item item-header">Common Vitamins</h1>
+
+    <!-- This adds blank space -->
+    <div style="clear:both; height:25px"></div>
+    
+
+
+
+
+
+  <ion-item class="item item-halfTrns">Vitamin C
+    <!-- Info Page -->
+    <button ion-button (click)="openVitaminCPage()" round item-end>
+        <div> <ion-icon name="information-circle"></ion-icon> </div>
+    </button>
+    <!-- Alarm Set! -->
+    <button ion-button color="danger" (click)="vitaminC()" round item-end>
+        <div> <ion-icon name="alarm"></ion-icon> </div>
+    </button>
+  </ion-item>
+
+
+  <ion-item class="item item-halfTrns">Zinc
+      <!-- Info Page -->
+      <button ion-button (click)="openZincPage()" round item-end>
+          <div> <ion-icon name="information-circle"></ion-icon> </div>
+      </button>
+      <!-- Alarm Set! -->
+      <button ion-button color="danger" (click)="zinc()" round item-end>
+          <div> <ion-icon name="alarm"></ion-icon> </div>
+      </button>
+    </ion-item>
+
+
+    <ion-item class="item item-halfTrns">Fish Oil
+        <!-- Info Page -->
+        <button ion-button (click)="openVitaminCPage()" round item-end>
+            <div> <ion-icon name="information-circle"></ion-icon> </div>
+        </button>
+        <!-- Alarm Set! -->
+        <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+            <div> <ion-icon name="alarm"></ion-icon> </div>
+        </button>
+      </ion-item>
+
+
+      <ion-item class="item item-halfTrns">Vitamin D
+          <!-- Info Page -->
+          <button ion-button (click)="openVitaminCPage()" round item-end>
+              <div> <ion-icon name="information-circle"></ion-icon> </div>
+          </button>
+          <!-- Alarm Set! -->
+          <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+              <div> <ion-icon name="alarm"></ion-icon> </div>
+          </button>
+        </ion-item>
+
+
+        <ion-item class="item item-halfTrns">Vitamin A
+            <!-- Info Page -->
+            <button ion-button (click)="openVitaminCPage()" round item-end>
+                <div> <ion-icon name="information-circle"></ion-icon> </div>
+            </button>
+            <!-- Alarm Set! -->
+            <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                <div> <ion-icon name="alarm"></ion-icon> </div>
+            </button>
+          </ion-item>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+          <ion-item class="item item-halfTrns">Vitamin B1
+              <!-- Info Page -->
+              <button ion-button (click)="openVitaminCPage()" round item-end>
+                  <div> <ion-icon name="information-circle"></ion-icon> </div>
+              </button>
+              <!-- Alarm Set! -->
+              <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                  <div> <ion-icon name="alarm"></ion-icon> </div>
+              </button>
+            </ion-item>
+
+            <ion-item class="item item-halfTrns">Calcium
+                <!-- Info Page -->
+                <button ion-button (click)="openVitaminCPage()" round item-end>
+                    <div> <ion-icon name="information-circle"></ion-icon> </div>
+                </button>
+                <!-- Alarm Set! -->
+                <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                    <div> <ion-icon name="alarm"></ion-icon> </div>
+                </button>
+              </ion-item>
+
+              <ion-item class="item item-halfTrns">Vitamin E
+                  <!-- Info Page -->
+                  <button ion-button (click)="openVitaminCPage()" round item-end>
+                      <div> <ion-icon name="information-circle"></ion-icon> </div>
+                  </button>
+                  <!-- Alarm Set! -->
+                  <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                      <div> <ion-icon name="alarm"></ion-icon> </div>
+                  </button>
+                </ion-item>
+
+                <ion-item class="item item-halfTrns">Iron
+                    <!-- Info Page -->
+                    <button ion-button (click)="openVitaminCPage()" round item-end>
+                        <div> <ion-icon name="information-circle"></ion-icon> </div>
+                    </button>
+                    <!-- Alarm Set! -->
+                    <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                        <div> <ion-icon name="alarm"></ion-icon> </div>
+                    </button>
+                  </ion-item>
+
+                  <ion-item class="item item-halfTrns">Vitamin K
+                      <!-- Info Page -->
+                      <button ion-button (click)="openVitaminCPage()" round item-end>
+                          <div> <ion-icon name="information-circle"></ion-icon> </div>
+                      </button>
+                      <!-- Alarm Set! -->
+                      <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                          <div> <ion-icon name="alarm"></ion-icon> </div>
+                      </button>
+                    </ion-item>
+
+                    <ion-item class="item item-halfTrns">Melatonin
+                        <!-- Info Page -->
+                        <button ion-button (click)="openVitaminCPage()" round item-end>
+                            <div> <ion-icon name="information-circle"></ion-icon> </div>
+                        </button>
+                        <!-- Alarm Set! -->
+                        <button ion-button color="danger" (click)="btnPushClicked()" round item-end>
+                            <div> <ion-icon name="alarm"></ion-icon> </div>
+                        </button>
+                      </ion-item>
+
+
+
+
+
+
+                      <!-- This adds blank space -->
+    <div style="clear:both; height:100px"></div>
+
+
 
-  <button ion-button full (click)="btnPushClicked()">Schedule!!!</button>
 
 </ion-content>

Vitamin/src/pages/alarm/alarm.scss

@@ -2,16 +2,48 @@ page-alarm {
 
 
 
-
+    .login {
+        background: url("../assets/imgs/background.jpg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
 
 
 
     //this removes the scroll bar on the side
-.scroll-content {
-    overflow: hidden;
+// .scroll-content {
+//     overflow: hidden;
+// }
+
+    //turn background transparent
+.item.item-halfTrns {
+	border-color: rgba(134, 130, 130, 0.39);
+	background-color: rgba(134, 130, 130, 0.39);
+	color: white; 
 }
 
 
 
+.item.item-fullTrns {
+	border-color: rgba(134, 130, 130, 0.39);
+	background-color: rgba(134, 130, 130, 0.39);
+	color: white; 
+}
+
+
+
+
+
+.item.item-header {
+	border-color: rgba(134, 130, 130, 0.39);
+	background-color: rgba(134, 130, 130, 0);
+	color: rgb(17, 121, 182); 
+}
+
+
+
+
+
 
 }

Vitamin/src/pages/alarm/alarm.ts

@@ -2,6 +2,9 @@ import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams, AlertController, Platform, DateTime } from 'ionic-angular';
 
 import { LocalNotifications } from '@ionic-native/local-notifications';
+import { BrowserGetTestability } from '@angular/platform-browser/src/browser/testability';
+import { VitaminCPage } from '../vitamin-c/vitamin-c';
+import { ZincPage } from '../zinc/zinc';
 
 
 
@@ -13,28 +16,95 @@ import { LocalNotifications } from '@ionic-native/local-notifications';
 export class AlarmPage {
 
 
-  constructor(public navCtrl: NavController, private localNoti: LocalNotifications, private platform: Platform){
-
+  constructor(public navCtrl: NavController, private localNoti: LocalNotifications, private platform: Platform, public alertCtrl: AlertController){
 
   }
 
 
+
+
+  
   btnPushClicked(){
     this.platform.ready().then(() => {
+      
+      this.localNoti.schedule({
+        id: 1,
+        title: 'Vita-Alarm!',
+        text: 'It\'s Time to take your Vitamin!',
+        trigger: {at: new Date(new Date().getTime() + 500000)},
+        data: {"Good job!":""},
+        led: 'FF0000',
+        
+     });
+    });
+
+    const alert = this.alertCtrl.create({
+      title: 'Vita-Alarm!',
+      subTitle: 'Alarm has been set!',
+      buttons: ['OK']
+    });
+    alert.present();
+  }
+
+
+  
+  vitaminC(){
+    this.platform.ready().then(() => {
       this.localNoti.schedule({
+        id: 1,
         title: 'Vita-Alarm!',
-        text: 'Take your Vitamin!',
-        trigger: {at: new Date(new Date().getTime() + 3600)},
+        text: 'It\'s Time to take Vitamin C!',
+        trigger: {at: new Date(new Date().getTime() + 500000)},
+        data: {"Good job!":""},
         led: 'FF0000',
         
      });
     });
+
+    const alert = this.alertCtrl.create({
+      title: 'Vita-Alarm!',
+      subTitle: 'Alarm has been set!',
+      buttons: ['OK']
+    });
+    alert.present();
   }
 
 
 
 
 
+  zinc(){
+    this.platform.ready().then(() => {
+      this.localNoti.schedule({
+        id: 1,
+        title: 'Vita-Alarm!',
+        text: 'It\'s Time to take Zinc!',
+        trigger: {at: new Date(new Date().getTime() + 500000)},
+        data: {"Good job!":""},
+        led: 'FF0000',
+        
+     });
+    });
+
+    const alert = this.alertCtrl.create({
+      title: 'Vita-Alarm!',
+      subTitle: 'Alarm has been set!',
+      buttons: ['OK']
+    });
+    alert.present();
+  }
+
+
+
+
+  openVitaminCPage() {
+    this.navCtrl.push(VitaminCPage);
+  }
+
+  openZincPage() {
+    this.navCtrl.push(ZincPage);
+  }
+
 
 
 

Vitamin/src/pages/home/home.scss

@@ -12,8 +12,6 @@ page-home {
 
 
 
-
-
     .scroll-content {
         overflow: hidden;
     }

Vitamin/src/pages/vitamin-c/vitamin-c.html

@@ -0,0 +1,37 @@
+<!--
+  Generated template for the VitaminCPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Vitamin C</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center class = "login">
+
+<!-- This adds blank space -->
+<div style="clear:both; height:100px"></div>
+
+    <ion-item class="item item-halfTrns text-center">
+        Benefits:
+        <br>
+        Prevent and Treat the Common Cold.
+        <br><br>
+        Recommendation:
+        <br>
+        Vitamin C is recommended for people <br>with insomnia.
+        <br><br>
+        Dosage:
+        <br>
+        75 mg /per day
+  </ion-item>  
+    
+
+
+</ion-content>

Vitamin/src/pages/vitamin-c/vitamin-c.scss

@@ -0,0 +1,21 @@
+page-vitamin-c {
+
+    .login {
+        background: url("../assets/imgs/background.jpg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    .scroll-content {
+        overflow: hidden;
+    }
+
+
+    .item.item-halfTrns {
+        border-color: rgba(134, 130, 130, 0.39);
+        background-color: rgba(134, 130, 130, 0.39);
+        color: white; 
+    }
+
+}

Vitamin/src/pages/vitamin-c/vitamin-c.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the VitaminCPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@Component({
+  selector: 'page-vitamin-c',
+  templateUrl: 'vitamin-c.html',
+})
+export class VitaminCPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad VitaminCPage');
+  }
+
+}

Vitamin/src/pages/zinc/zinc.html

@@ -0,0 +1,37 @@
+<!--
+  Generated template for the ZincPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Zinc</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center class = "login">
+
+    <!-- This adds blank space -->
+    <div style="clear:both; height:100px"></div>
+    
+        <ion-item class="item item-halfTrns text-center">
+            Benefits:
+            <br>
+            Aids in Nutrient Absorption and <br>Digestion.
+            <br><br>
+            Recommendation:
+            <br>
+            Zinc is recommended for Vegan or <br>vegetarian.
+            <br><br>
+            Dosage:
+            <br>
+            11 mg /per day
+      </ion-item>  
+        
+    
+    
+    </ion-content>

Vitamin/src/pages/zinc/zinc.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ZincPage } from './zinc';
+
+@NgModule({
+  declarations: [
+    ZincPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(ZincPage),
+  ],
+})
+export class ZincPageModule {}

Vitamin/src/pages/zinc/zinc.scss

@@ -0,0 +1,21 @@
+page-zinc {
+
+    .login {
+        background: url("../assets/imgs/background.jpg");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    .scroll-content {
+        overflow: hidden;
+    }
+
+
+    .item.item-halfTrns {
+        border-color: rgba(134, 130, 130, 0.39);
+        background-color: rgba(134, 130, 130, 0.39);
+        color: white; 
+    }
+    
+}

Vitamin/src/pages/zinc/zinc.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the ZincPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-zinc',
+  templateUrl: 'zinc.html',
+})
+export class ZincPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad ZincPage');
+  }
+
+}