Added home-data component and refresh button animation (from Lior)

AgudaApp/src/app/app.html

@@ -1 +1 @@
-<ion-nav [root]="rootPage"></ion-nav>
+<ion-nav [root]="rootPage"></ion-nav>

AgudaApp/src/app/app.module.ts

@@ -12,6 +12,8 @@ import { GalleryPage } from '../pages/gallery/gallery';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { RefreshComponent } from '../components/refresh/refresh';
+import { HomeDataComponent } from '../components/home-data/home-data';
+import { ComponentsModule } from '../components/components.module';
 
 @NgModule({
   declarations: [
@@ -25,7 +27,8 @@ import { RefreshComponent } from '../components/refresh/refresh';
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(MyApp),
+    ComponentsModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [

AgudaApp/src/app/app.scss

@@ -1,22 +1,6 @@
 // http://ionicframework.com/docs/theming/
 // App Global Sass
-.tabbar_red .tabbar {
-    background: red;
-}
 
-.tabbar a[aria-selected=true] {
-    background: brown;
-}
-
-.tabbar .tab-button-text {
-    color: azure;
-    font-weight: bold;
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-.tabbar .icon {
-    color: azure;
-}
 
 // --------------------------------------------------
 // Put style rules here that you want to apply globally. These

AgudaApp/src/components/components.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { HomeDataComponent } from './home-data/home-data';
+
+@NgModule({
+	declarations: [HomeDataComponent],
+	imports: [],
+	exports: [HomeDataComponent]
+})
+export class ComponentsModule {}

AgudaApp/src/components/home-data/home-data.html

@@ -0,0 +1,8 @@
+<!-- Generated template for the HomeDataComponent component -->
+<div class="data-header">
+  {{headline}}
+</div>
+<div class="data-content">
+  {{content}}
+</div>
+<p></p>

AgudaApp/src/components/home-data/home-data.scss

@@ -0,0 +1,3 @@
+home-data {
+
+}

AgudaApp/src/components/home-data/home-data.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the HomeDataComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'home-data',
+  templateUrl: 'home-data.html'
+})
+export class HomeDataComponent {
+
+  @Input() headline: string;
+  @Input() content: string;
+
+  constructor() {
+  }
+
+  ngOnInit(){
+
+  }
+
+  ngOnChange(data){
+
+  }
+
+}

AgudaApp/src/components/refresh/refresh.html

@@ -1,2 +1,4 @@
 <!-- Generated template for the RefreshComponent component -->
-<button (click)="doRefresh();"><i class="fas fa-sync"></i></button>
+<button class='spinner' (click)="doRefresh();">
+    <i class="fas fa-sync"></i>
+</button>

AgudaApp/src/components/refresh/refresh.ts

@@ -11,7 +11,6 @@ import { InfoPage } from '../../pages/info/info';
   templateUrl: 'refresh.html'
 })
 export class RefreshComponent {
-
   tab: string;
 
   constructor(private events: Events, private h: HomePage, private c: CalendarPage, private g: GalleryPage, private i: InfoPage) {
@@ -20,7 +19,11 @@ export class RefreshComponent {
     });   
   }
 
+
   doRefresh(){
+
+    document.getElementsByClassName('spinner').item(0).classList.add('fa-spin');
+
     if(this.tab == this.h.tabName)
       this.h.doRefresh();
 
@@ -34,5 +37,9 @@ export class RefreshComponent {
       this.i.doRefresh();
 
     console.log('clicked');
+
+    setTimeout(function(){
+      document.getElementsByClassName('spinner').item(0).classList.remove('fa-spin');
+    },1000);
   }
 }

AgudaApp/src/pages/home/home.html

@@ -8,10 +8,15 @@
 </ion-header>
 
 <ion-content padding>
-    <div style="text-align:center">
+    <main>
         <h1>
             Welcome to {{ title }}!
         </h1>
         <img src="./../../assets/imgs/logo.jpg" width="200" height="200">
-    </div>
+        <home-data [headline]="'headline test'" [content]="'content test'"></home-data>
+        <home-data [headline]="'headline test'" [content]="'content test'"></home-data>
+        <home-data [headline]="'headline test'" [content]="'content test'"></home-data>
+        <home-data [headline]="'headline test'" [content]="'content test'"></home-data>
+        <home-data [headline]="'headline test'" [content]="'content test'"></home-data>        
+    </main>
 </ion-content>

AgudaApp/src/pages/home/home.scss

@@ -1 +1,3 @@
-page-home {}
+main {
+    text-align: center;
+}

AgudaApp/src/pages/home/home.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavController, Events } from 'ionic-angular';
+import { HomeDataComponent } from '../../components/home-data/home-data';
 
 @Component({
   selector: 'page-home',

AgudaApp/src/pages/tabs/tabs.html

@@ -1,6 +1,6 @@
 <ion-tabs class="tabbar_red">
-    <ion-tab [root]="tab1Root" tabTitle="בית" tabIcon="home"></ion-tab>
-    <ion-tab [root]="tab2Root" tabTitle="יומן" tabIcon="calendar"></ion-tab>
-    <ion-tab [root]="tab3Root" tabTitle="גלריה" tabIcon="images"></ion-tab>
-    <ion-tab [root]="tab4Root" tabTitle="מידע" tabIcon="information-circle"></ion-tab>
+    <ion-tab [root]="homeTab" tabTitle="בית" tabIcon="home"></ion-tab>
+    <ion-tab [root]="calendarTab" tabTitle="יומן" tabIcon="calendar"></ion-tab>
+    <ion-tab [root]="galleryTab" tabTitle="גלריה" tabIcon="images"></ion-tab>
+    <ion-tab [root]="infoTab" tabTitle="מידע" tabIcon="information-circle"></ion-tab>
 </ion-tabs>

AgudaApp/src/pages/tabs/tabs.scss

@@ -0,0 +1,17 @@
+.tabbar_red .tabbar {
+    background: red;
+}
+
+.tabbar a[aria-selected=true] {
+    background: brown;
+}
+
+.tabbar .tab-button-text {
+    color: azure;
+    font-weight: bold;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.tabbar .icon {
+    color: azure;
+}

AgudaApp/src/pages/tabs/tabs.ts

@@ -10,10 +10,10 @@ import { CalendarPage } from '../calendar/calendar';
 })
 export class TabsPage {
 
-  tab1Root = HomePage;
-  tab2Root = CalendarPage;
-  tab3Root = GalleryPage;
-  tab4Root = InfoPage;
+  homeTab = HomePage;
+  calendarTab = CalendarPage;
+  galleryTab = GalleryPage;
+  infoTab = InfoPage;
 
   constructor() {