Backend API integration (#39)

Controller changes to integrate the new views with the real API, adding & updating stories, working photo upload, auth guard skeleton.

src/app/app.component.ts

@@ -4,7 +4,7 @@ import {StatusBar} from "@ionic-native/status-bar";
 import {SplashScreen} from "@ionic-native/splash-screen";
 
 import {TutorialPage} from "../pages/tutorial/tutorial";
-import {PatientService} from "../services/back-end/user.service";
+import {PatientService} from "../providers/back-end/user.service";
 import {env} from "./environment";
 import {User} from "../dto/user";
 import { AlbumsPage } from "../pages/albums/albums";

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import {ErrorHandler, NgModule} from "@angular/core";
-import {BrowserModule} from "@angular/platform-browser";
+import {BrowserModule } from "@angular/platform-browser";
 import {IonicApp, IonicErrorHandler, IonicModule} from "ionic-angular";
 import {IonicStorageModule} from "@ionic/storage";
 import {MyApp} from "./app.component";
@@ -10,17 +10,17 @@ import {PatientProfilePage} from "../pages/patientprofile/patientprofile";
 
 import {StatusBar} from "@ionic-native/status-bar";
 import {SplashScreen} from "@ionic-native/splash-screen";
-import {StanizerService} from "../services/stanizer.service";
+import {StanizerService} from "../providers/stanizer.service";
 import {StoryDetailsPage} from "../pages/storydetails/storydetails";
-import {PrismaService} from "../services/back-end/prisma-api.service";
-import {PatientService} from "../services/back-end/user.service";
+import {PrismaService} from "../providers/back-end/prisma-api.service";
+import {PatientService} from "../providers/back-end/user.service";
 import {HttpModule} from "@angular/http";
-import {StoryService} from "../services/back-end/story.service";
+import {StoryService} from "../providers/back-end/story.service";
 import {TutorialPage} from "../pages/tutorial/tutorial";
 import {Camera} from "@ionic-native/camera";
 import {NewStoryPage} from "../pages/new-story/new-story";
 import {FileChooser} from "@ionic-native/file-chooser";
-import {UtilService} from "../services/util-service";
+import {UtilService} from "../providers/util-service";
 
 import {QuestionsPage} from "../pages/questions/questions";
 import {QuestionPage} from "../pages/question/question";
@@ -35,6 +35,7 @@ import {FilePath} from "@ionic-native/file-path";
 
 import {AlbumsPage} from "../pages/albums/albums";
 import {AlbumDetailPage} from "../pages/album-detail/album-detail";
+import { AuthService } from '../providers/auth-service/auth-service';
 
 
 @NgModule({
@@ -91,7 +92,8 @@ import {AlbumDetailPage} from "../pages/album-detail/album-detail";
     FileChooser,
     Transfer,
     FilePath,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    AuthService
   ]
 })
 export class AppModule {

src/app/app.scss

@@ -69,3 +69,27 @@ h1, h2, h3, .toolbar-title, ion-list-header .label, .tab-button-text {
   .star.favorited {
     color: color($colors, yellow);
   }
+
+  // ADD NEW STORY/ALBUM header
+
+  .add-new-container {
+    background-color: map-get($colors, 'primary');
+    color: #fff;
+    width: 100%;
+    padding: 2.5em 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .add-new > * {
+    display: block;
+  }
+
+  .add-new > ion-icon {
+    font-size: 3em;
+    text-align: center;
+  }
+
+  .add-new > span {
+  }

src/assets/json/albums.json

@@ -1,4 +1,10 @@
 [
+  {
+    "id": "100",
+    "title": "De leegte",
+    "description": "Waar ik vroeger werkte.",
+    "stories": []
+  },
   {
     "id": "1",
     "title": "Werk",

src/dto/album.ts

@@ -13,7 +13,18 @@ export class Album {
     this.id = json.id;
     this.title = json.title;
     this.description = json.description;
-    if (json.stories) // TODO: these are not full stories
-      json.stories.push(story => new UserStory(story));
+    json.stories.forEach((story) => this.stories.push(new UserStory(story)));
   }
+
+  isEmpty(): boolean {
+    return this.stories.length === 0;
+  }
+
+  getBackgroundImage(i: number): string {
+    if (this.stories[i]) {
+      return this.stories[i].source;
+    }
+    else return "";
+  }
+
 }

src/pages/album-detail/album-detail.html

@@ -10,10 +10,13 @@ <h2>This is a test question? Or is it?</h2>
   </div>
   <ion-grid>
     <ion-row>
-      <ion-col col-6 col-md-4 *ngFor="let stories of album.stories,let i=index"
+      <ion-col col-6 col-md-4 *ngFor="let story of album.stories,let i=index"
       (click)="showDetails(album, i)">
         <div class="album-thumb"
-        [ngStyle]="{'background-image': 'url(' + getThumb(album.stories[i].source) + ')'}">
+        [style]="sanitize(album.getBackgroundImage(i))">
+          <div class="description-wrapper" *ngIf="!story.source && story.description">
+            <p class="story-description">{{story.description}}</p>
+          </div>
         </div>
         <ion-icon class="star" name="{{isFavorited(i) ? 'star' : 'star-outline'}}"
           [class.favorited]="isFavorited(i)" ></ion-icon>

src/pages/album-detail/album-detail.scss

@@ -20,7 +20,11 @@ album-detail {
     height: 50vw; // todo: dynamic - set to width of comonent?
     background-size: cover;
     background-position: center;
+    background-color: color($colors, light-gray);
     position: relative;
+
+    // settings for the description text
+    padding: 2em;
   }
 
   .col, [col-6] {
@@ -36,29 +40,18 @@ album-detail {
     bottom: 1em;
     left: 0;
     width: 100%;
-
   }
 
-  .add-new-container {
-    background-color: map-get($colors, 'primary');
-    color: #fff;
-    width: 100%;
-    padding: 2.5em 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .add-new > * {
-    display: block;
-  }
-
-  .add-new > ion-icon {
-    font-size: 3em;
-    text-align: center;
+  .description-wrapper {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 100%;
   }
 
-  .add-new > span {
+  .story-description {
+    margin: 0;
+    font-size: map-get($sizes, 'small');
+    color: color($colors, dark-gray);
   }
 
   .star {

src/pages/album-detail/album-detail.ts

@@ -1,11 +1,13 @@
 import {Component, OnInit} from "@angular/core";
 import {ActionSheetController, NavController, NavParams} from "ionic-angular";
-import {StoryService} from "../../services/back-end/story.service";
+import {StoryService} from "../../providers/back-end/story.service";
 import {Album} from "../../dto/album";
-import {UtilService} from "../../services/util-service";
+import {UtilService} from "../../providers/util-service";
 import {NewStoryPage} from "../new-story/new-story";
 import {StoriesPage} from "../stories/stories";
 import { StoryDetailsPage } from "../storydetails/storydetails";
+import { DomSanitizer } from "@angular/platform-browser/platform-browser";
+import { StanizerService } from "../../providers/stanizer.service";
 
 @Component({
   selector: 'album-detail',
@@ -16,7 +18,7 @@ export class AlbumDetailPage implements OnInit {
   public album: Album;
 
   constructor(public navCtrl: NavController, public actionsheetCtrl: ActionSheetController, public utilService: UtilService, public navParams: NavParams,
-              private storyService: StoryService) {
+              private storyService: StoryService, private sanitizer: StanizerService) {
     this.album = navParams.get("album") as Album;
   }
 
@@ -34,7 +36,7 @@ export class AlbumDetailPage implements OnInit {
 
 
   getThumb(url: string): string {
-    return "assets/img/t/" + url;
+    return "" + url;
   }
 
   openActionSheet() {
@@ -95,6 +97,14 @@ export class AlbumDetailPage implements OnInit {
     actionSheet.present();
   }
 
+  // DOM Sanitizer for image urls
+  sanitize(url): any {
+    console.log("sanitize attempt: " + url);
+    const style = `background-image: url(${url})`;
+    console.log(style);
+    return this.sanitizer.sanitizeStyle(style);
+  }
+
   showDetails(album: Album, index: number) {
     this.navCtrl.push(StoryDetailsPage, {
       "album": album,

src/pages/albums/albums.html

@@ -5,10 +5,18 @@ <h2>Waarover babbelen we vandaag?</h2>
   <ion-grid>
     <ion-row>
       <ion-col col-6 col-md-4 *ngFor="let album of albums,let i=index"
-               class="album-thumb" [ngStyle]="{'background-image': 'url(' + getThumb(album.stories[0].source) + ')'}"
+               class="album-thumb"
+               [style.background-image]="getBackgroundImage(i)"
                (click)="showDetails(album)">
         <h3 class="hist-title">{{album.title ? album.title : '?'}}</h3>
       </ion-col>
     </ion-row>
   </ion-grid>
+  <div class="add-new-container">
+    <div class="add-new">
+      <ion-icon name="camera"></ion-icon>
+      <span>Voeg album toe</span>
+    </div>
+  </div>
+
 </ion-content>

src/pages/albums/albums.scss

@@ -8,6 +8,7 @@ albums-page {
     height: 50vw; // todo: dynamic - set to width of comonent?
     background-size: cover;
     background-position: center;
+    background-color: color($colors, dark-gray);
     position: relative;
   }
 

src/pages/albums/albums.ts

@@ -1,8 +1,8 @@
 import {Component, OnInit} from "@angular/core";
 import {ActionSheetController, NavController} from "ionic-angular";
-import {StanizerService} from "../../services/stanizer.service";
-import {PatientService} from "../../services/back-end/user.service";
-import {StoryService} from "../../services/back-end/story.service";
+import {StanizerService} from "../../providers/stanizer.service";
+import {PatientService} from "../../providers/back-end/user.service";
+import {StoryService} from "../../providers/back-end/story.service";
 import {User} from "../../dto/user";
 import {UserStory} from "../../dto/user-story";
 import {Album} from "../../dto/album";
@@ -47,7 +47,7 @@ export class AlbumsPage implements OnInit {
   }
 
   ionViewWillEnter(): void {
-    this.storyService.getLOLBUMS().toPromise().then(albums => {
+    this.storyService.getAlbums(1).toPromise().then(albums => {
       this.albums = albums as Album[];
     });
   }
@@ -68,4 +68,17 @@ export class AlbumsPage implements OnInit {
       "album": album,
     })
   }
+
+  getBackgroundImage(i: number): string {
+    if (this.albums[i].isEmpty()) {
+      return ""
+    }
+    else {
+      /*
+      let imageSrc = this.albums[i].stories[0].source;
+      return "url('" + imageSrc + "')";
+      */
+      return this.albums[i].getBackgroundImage(0);
+    }
+  }
 }

src/pages/api-testing/api-testing.ts

@@ -9,11 +9,11 @@ import {
   ToastController
 } from "ionic-angular";
 import {TutorialPage} from "../tutorial/tutorial";
-import {PatientService} from "../../services/back-end/user.service";
+import {PatientService} from "../../providers/back-end/user.service";
 import {Patient} from "../../dto/patient";
-import {StoryService} from "../../services/back-end/story.service";
+import {StoryService} from "../../providers/back-end/story.service";
 import {Album} from "../../dto/album";
-import {UtilService} from "../../services/util-service";
+import {UtilService} from "../../providers/util-service";
 import {UserStory} from "../../dto/user-story";
 import {API_URL, env} from "../../app/environment";
 import {FileTransfer, FileTransferObject, FileUploadOptions} from "@ionic-native/file-transfer";
@@ -282,9 +282,6 @@ export class ApiTestingPage {
   public uploadImage() {
     // Destination URL
     var url = API_URL + '/' + env.api.getPatient + '/' + 1 + '/' + env.api.getStory + '/' + 20 + '/' + env.api.getAsset;
-
-
-
     // File for Upload
     var targetPath = //cordova.file.documentsDirectory + 'assets/img/tutorial/empty-1.jpg';
       this.pathForImage(this.lastImage);
@@ -293,8 +290,8 @@ export class ApiTestingPage {
     var filename = this.lastImage;
 
     var options = {
-      fileKey: "image",
-      fileName: "image",
+      fileKey: "asset",
+      fileName: "asset",
       mimeType: "image/jpeg",
       headers: {
         "Connection": "close"

src/pages/browse/browse.ts

@@ -1,9 +1,9 @@
 import {Component, OnInit} from "@angular/core";
 import {ActionSheetController, NavController} from "ionic-angular";
-import {StanizerService} from "../../services/stanizer.service";
+import {StanizerService} from "../../providers/stanizer.service";
 import {StoriesPage} from "../stories/stories";
-import {PatientService} from "../../services/back-end/user.service";
-import {StoryService} from "../../services/back-end/story.service";
+import {PatientService} from "../../providers/back-end/user.service";
+import {StoryService} from "../../providers/back-end/story.service";
 import {Album} from "../../dto/album";
 import {FileChooser} from "@ionic-native/file-chooser";
 import {Camera} from "@ionic-native/camera";

src/pages/empty/empty.ts

@@ -1,6 +1,6 @@
 import {Component} from "@angular/core";
 import {NavController, NavParams} from "ionic-angular";
-import {UtilService} from "../../services/util-service";
+import {UtilService} from "../../providers/util-service";
 import {NewStoryPage} from "../new-story/new-story";
 
 @Component({

src/pages/new-story-selection/new-story-selection.ts

@@ -1,7 +1,7 @@
 import {Component} from "@angular/core";
 import {ActionSheetController, NavController, NavParams} from "ionic-angular";
 import {NewStoryPage} from "../new-story/new-story";
-import {UtilService} from "../../services/util-service";
+import {UtilService} from "../../providers/util-service";
 
 
 @Component({
@@ -50,6 +50,7 @@ export class NewStorySelectionPage {
 
               fileChooseAttempt.then(
                 (dataUrl) => {
+                  this.utilService.presentToast(dataUrl);
                   this.navCtrl.push(NewStoryPage,
                     {"dataUrl": dataUrl})
                 });

src/pages/new-story/new-story.html

@@ -6,16 +6,18 @@
 
 <ion-content padding>
   <ion-item-group>
-    <img class="new-story-thumb" *ngIf="dataUrl" src="{{dataUrl}}">
+    <img class="new-story-thumb" *ngIf="dataUrl" src="{{utilService.pathForImage(dataUrl)}}">
     <ion-card-content>
       <ion-item>
-        <ion-textarea class="story-text" placeholder="{{placeHolder}}" [(ngModel)]="description" rows="7" clearInput></ion-textarea>
+        <ion-textarea class="story-text" placeholder="{{placeHolder}}" [(ngModel)]="description" rows="7"
+                      clearInput></ion-textarea>
       </ion-item>
     </ion-card-content>
-    <ion-footer no-shadow>
-      <button class="save-button" ion-button full medium icon-right color="general" (click)="commit()" [disabled]="!description">
-        <ion-icon name="checkmark"></ion-icon><p>Opslaan<p>
-      </button>
-    </ion-footer>
+    <button class="save-button" ion-button full medium icon-right color="general" (click)="commit()"
+            [disabled]="!description">
+      <ion-icon name="checkmark"></ion-icon>
+      <p>Opslaan
+      <p>
+    </button>
   </ion-item-group>
 </ion-content>