Alpha-1.0.0

src/app/app.module.ts

@@ -1,33 +1,56 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
+import { TabsPage } from '../pages/tabs/tabs';
+import { HomePage } from '../pages/home/home';
+import { TagsSearchModal } from '../pages/home/tags-search';
 import { ArticlesPage } from '../pages/articles/articles';
+import { SingleArticle } from '../pages/articles/single-article';
+import { NewArticle } from '../pages/articles/new-article';
+import { EditArticle } from '../pages/articles/edit-article';
 import { TagsPage } from '../pages/tags/tags';
-import { HomePage } from '../pages/home/home';
+import { NewTag } from '../pages/tags/new-tag';
+import { EditTag } from '../pages/tags/edit-tag';
 import { SettingsPage } from '../pages/settings/settings';
-import { TabsPage } from '../pages/tabs/tabs';
+import { InfoPage } from '../pages/info/info';
+import { DatabaseService } from '../providers/database-service';
+import { NfcService } from '../providers/nfc-service';
 
 @NgModule({
   declarations: [
     MyApp,
-    TagsPage,
-    ArticlesPage,
+    TabsPage,
     HomePage,
+    TagsSearchModal,
+    ArticlesPage,
+    SingleArticle,
+    EditArticle,
+    NewArticle,
+    TagsPage,
+    NewTag,
+    EditTag,
     SettingsPage,
-    TabsPage
+    InfoPage
   ],
   imports: [
     IonicModule.forRoot(MyApp)
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    TagsPage,
-    ArticlesPage,
+    TabsPage,
     HomePage,
+    TagsSearchModal,
+    ArticlesPage,
+    SingleArticle,
+    EditArticle,
+    NewArticle,
+    TagsPage,
+    NewTag,
+    EditTag,
     SettingsPage,
-    TabsPage
+    InfoPage
   ],
-  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
+  providers: [DatabaseService, NfcService, {provide: ErrorHandler, useClass: IonicErrorHandler}]
 })
 export class AppModule {}

src/pages/articles/articles.html

@@ -7,4 +7,16 @@
 </ion-header>
 
 <ion-content>
+  <ion-list>
+    <ion-item *ngFor="let article of articles" (click)="openModalSingle(article.id)">
+      <ion-avatar item-left>
+      <img src="{{article.thumbnail}}">
+      </ion-avatar>
+      <h2>{{article.name}}</h2>
+      <p>{{article.description}}</p>
+    </ion-item>
+  </ion-list>
+  <ion-fab right bottom>
+  <button ion-fab color="primary" (click)="openModalNew()"><ion-icon name="add"></ion-icon></button>
+  </ion-fab>
 </ion-content>

src/pages/articles/articles.scss

@@ -1,3 +1,15 @@
 page-articles {
 
 }
+
+single-article {
+    .chip-md {
+        margin: 5px 5px;
+    }
+}
+
+#camera-image ion-icon,  {
+font-size: 2.0em;
+margin-right: 30px;
+color: rgba(60, 60, 60, 0.7);
+}

src/pages/articles/articles.ts

@@ -1,15 +1,47 @@
 import { Component } from '@angular/core';
-
-import { NavController } from 'ionic-angular';
+import { ModalController } from 'ionic-angular';
+import { SingleArticle } from './single-article';
+import { NewArticle } from './new-article';
+import { DatabaseService } from "../../providers/database-service";
 
 @Component({
   selector: 'page-articles',
   templateUrl: 'articles.html'
 })
 export class ArticlesPage {
 
-  constructor(public navCtrl: NavController) {
+  public articles: Array<Object>;
+
+  public constructor(public modalCtrl: ModalController, private database: DatabaseService ) {
+    this.articles = [];
+  }
+
+  ionViewWillEnter(){
+    this.readAllArticles();
+  }
+
+  public openModalSingle(id: number) { 
+    let modal = this.modalCtrl.create(SingleArticle, {id: id});
+    modal.present();
+    modal.onDidDismiss(data => {
+        this.readAllArticles();
+    });
+  }
+
+  public openModalNew() {
+    let modal = this.modalCtrl.create(NewArticle);
+    modal.present();
+    modal.onDidDismiss(data => {
+     this.readAllArticles();
+    });
+  }
 
+  public readAllArticles() {
+    this.database.readAllArticles().then((result) => {
+          this.articles = <Array<Object>> result;
+      }, (error) => {
+          console.log("ERROR: ", error);
+      });
   }
 
-}
+}

src/pages/articles/edit-article.html

@@ -0,0 +1,47 @@
+<ion-header>
+  <ion-navbar color="primary">
+    <ion-buttons left>
+      <button ion-button (click)="dismiss()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>
+      Uredi Artikl
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <ion-item>
+      <ion-label color="primary">Ime</ion-label>
+      <ion-input type="text" [(ngModel)]="name"></ion-input>
+  </ion-item>
+  <ion-item>
+      <ion-label color="primary">Opis</ion-label>
+      <ion-input type="text" [(ngModel)]="description"></ion-input>
+  </ion-item>
+  <ion-item>
+      <ion-label color="primary">Kod</ion-label>
+      <ion-input type="text" [(ngModel)]="code"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label color="primary">Oznake</ion-label>
+    <ion-select [(ngModel)]="tagsSelected" multiple="true" okText="Potvrdi" cancelText="Odustani">
+      <ion-option *ngFor="let tag of tags" value="{{tag.id}}" selected="{{ tag.selected ? 'true' : 'false'}}">{{tag.name}}</ion-option>
+    </ion-select>
+  </ion-item>
+  <ion-item id="camera-image">
+    <ion-thumbnail item-left>
+      <img src="{{thumbnail}}">
+    </ion-thumbnail>
+    <ion-icon item-right name="image" (click)="selectFromGallery()"></ion-icon>
+    <ion-icon item-right name="camera" (click)="takePicture()"></ion-icon>
+  </ion-item>
+  <ion-grid>
+   <br>
+  <ion-row>
+    <ion-col width-50><button ion-button round outline block (click)="editArticle()">Potvrdi</button></ion-col>
+    <ion-col width-50><button ion-button round outline block (click)="dismiss()">Odustani</button></ion-col>
+  </ion-row>
+</ion-grid>
+</ion-content>

src/pages/articles/edit-article.ts

@@ -0,0 +1,89 @@
+import { Component } from '@angular/core';
+import { NavParams, ViewController } from 'ionic-angular';
+import { Camera } from 'ionic-native';
+import { DatabaseService } from "../../providers/database-service";
+
+@Component({
+  selector: 'edit-article',
+  templateUrl: 'edit-article.html'
+})
+
+export class EditArticle {
+  public id: number;
+  public name: string;
+  public thumbnail: string;
+  public description: string;
+  public code: string;
+  public tags: any;
+  public tagsSelected: Array<any>;
+  public tagsNames: any;
+
+  constructor(public viewCtrl: ViewController, public params: NavParams, private database: DatabaseService ) {
+    let article = params.get("article");
+    let tagsObjectArray = params.get("tags");
+    this.tagsNames = tagsObjectArray.map (tag => tag.name);
+    this.tagsSelected = tagsObjectArray.map(tag => tag.id);
+    console.log(this.tagsSelected);
+
+    this.id = article.id;
+    this.name = article.name;
+    this.thumbnail = article.thumbnail;
+    this.description = article.description;
+    this.code = article.code;
+
+    this.database.readAllTags().then((result) => {
+        this.filterTags(result);
+    }, (error) => {
+        console.log("ERROR: ", error);
+    });
+
+  }
+
+   public filterTags(allTags) {
+    this.tags = allTags.map(val => {
+        if (this.tagsNames.includes(val.name)) {
+          return {name: val.name, selected: true, id: val.id};
+        } else {
+          return {name: val.name, selected: false, id: val.id};
+        }
+    });
+   }
+
+  public takePicture() {
+    let options = {saveToPhotoAlbum: true };
+    Camera.getPicture(options).then((imageData) => {
+      this.thumbnail = imageData;
+      }, (err) => {
+      console.log(err);
+    });
+  }
+
+  public selectFromGallery() {
+    let options = {
+      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
+      destinationType: Camera.DestinationType.FILE_URI,    
+      encodingType: Camera.EncodingType.JPEG,      
+      correctOrientation: true
+    };
+    Camera.getPicture(options).then((imageData) => {
+        this.thumbnail = imageData;
+    }, (err) => {
+        console.log(err);
+    });
+
+  }
+
+  public editArticle() {
+    console.log(this.tagsSelected);
+
+    this.database.updateArticle(this.name, this.thumbnail, this.description, this.code, this.id, this.tagsSelected).then((result) => {
+        this.dismiss();
+    }, (error) => {
+        console.log("ERROR: ", error);
+    });
+  }
+
+  public dismiss() {
+    this.viewCtrl.dismiss();
+  }
+}

src/pages/articles/new-article.html

@@ -0,0 +1,47 @@
+<ion-header>
+  <ion-navbar color="primary">
+    <ion-buttons left>
+      <button ion-button (click)="dismiss()">
+        <ion-icon name="arrow-back"></ion-icon>
+      </button>
+    </ion-buttons>
+    <ion-title>
+      Unos Novog Artikla
+    </ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <ion-item>
+      <ion-label color="primary">Ime</ion-label>
+      <ion-input type="text" [(ngModel)]="name"></ion-input>
+  </ion-item>
+  <ion-item>
+      <ion-label color="primary">Opis</ion-label>
+      <ion-input type="text" [(ngModel)]="description"></ion-input>
+  </ion-item>
+  <ion-item>
+      <ion-label color="primary">Kod</ion-label>
+      <ion-input type="text" [(ngModel)]="code"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label color="primary">Oznake</ion-label>
+    <ion-select [(ngModel)]="tagsSelected" multiple="true" okText="Potvrdi" cancelText="Odustani">
+      <ion-option *ngFor="let tag of tags" value="{{tag.id}}">{{tag.name}}</ion-option>
+    </ion-select>
+  </ion-item>
+  <ion-item id="camera-image">
+      <ion-thumbnail item-left>
+        <img src="{{thumbnail}}">
+      </ion-thumbnail>
+      <ion-icon item-right name="image" (click)="selectFromGallery()"></ion-icon>
+      <ion-icon item-right name="camera" (click)="takePicture()"></ion-icon>
+  </ion-item>
+  <ion-grid>
+   <br>
+  <ion-row>
+    <ion-col width-50><button ion-button round outline block (click)="createArticle()">Potvrdi</button></ion-col>
+    <ion-col width-50><button ion-button round outline block (click)="dismiss()">Odustani</button></ion-col>
+  </ion-row>
+</ion-grid>
+</ion-content>