Merge pull request #258 from origami-team/responsive

Responsive
origami-team · Nov 25, 2020 · e60ce0a · e60ce0a
2 parents 27c475a + bab9488
commit e60ce0a
Show file tree

Hide file tree

Showing 35 changed files with 238 additions and 292 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -6,7 +6,7 @@ android {
         applicationId "de.reedu.origaminext"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 3
         versionName "0.21"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
     }

diff --git a/android/app/src/main/res/xml/config.xml b/android/app/src/main/res/xml/config.xml
@@ -6,14 +6,5 @@
     <param name="android-package" value="org.apache.cordova.deviceorientation.CompassListener"/>
   </feature>
 
-  <feature name="File">
-    <param name="android-package" value="org.apache.cordova.file.FileUtils"/>
-    <param name="onload" value="true"/>
-  </feature>
-
-  <feature name="FileTransfer">
-    <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer"/>
-  </feature>
-
 
 </widget>
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
@@ -357,7 +357,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 30;
+				CURRENT_PROJECT_VERSION = 31;
 				DEVELOPMENT_TEAM = 7D2772F462;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
@@ -379,7 +379,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = App/App.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 30;
+				CURRENT_PROJECT_VERSION = 31;
 				DEVELOPMENT_TEAM = 7D2772F462;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;

diff --git a/ios/App/App/config.xml b/ios/App/App/config.xml
@@ -6,14 +6,5 @@
     <param name="ios-package" value="CDVCompass"/>
   </feature>
 
-  <feature name="File">
-    <param name="ios-package" value="CDVFile"/>
-    <param name="onload" value="true"/>
-  </feature>
-
-  <feature name="FileTransfer">
-    <param name="ios-package" value="CDVFileTransfer"/>
-  </feature>
-
 
 </widget>
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "@capacitor/ios": "^2.4.2",
     "@ionic-native/core": "^5.24.0",
     "@ionic-native/device-orientation": "^5.26.0",
-    "@ionic-native/file-transfer": "^5.24.0",
     "@ionic/angular": "^5.0.7",
     "@ionic/pwa-elements": "^3.0.1",
     "@ionic/storage": "^2.2.0",
@@ -51,8 +50,6 @@
     "cordova-browser": "6.0.0",
     "cordova-ios": "^5.1.0",
     "cordova-plugin-device-orientation": "^2.0.1",
-    "cordova-plugin-file": "^6.0.2",
-    "cordova-plugin-file-transfer": "^1.7.1",
     "core-js": "^3.6.5",
     "es6-promise-plugin": "^4.2.2",
     "jetifier": "^1.6.5",
@@ -102,9 +99,7 @@
   "description": "An Ionic project",
   "cordova": {
     "plugins": {
-      "cordova-plugin-device-orientation": {},
-      "cordova-plugin-file": {},
-      "cordova-plugin-file-transfer": {}
+      "cordova-plugin-device-orientation": {}
     },
     "platforms": [
       "android",
@@ -120,4 +115,4 @@
     "path": false,
     "os": false
   }
-}
+}
diff --git a/src/app/components/feedback/feedback.component.ts b/src/app/components/feedback/feedback.component.ts
@@ -10,10 +10,8 @@ import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
 import { TrackerService } from '../../services/tracker.service';
 import { Component } from '@angular/core';
 import { Plugins, Capacitor, GeolocationPosition } from '@capacitor/core';
-import { DeviceOrientationCompassHeading, DeviceOrientation } from '@ionic-native/device-orientation/ngx';
-import { env } from 'process';
-import { environment } from 'src/environments/environment';
 import centroid from '@turf/centroid'
+import { OrigamiOrientationService } from 'src/app/services/origami-orientation.service';
 
 
 enum FeedbackType {
@@ -56,22 +54,20 @@ export class FeedbackComponent {
 
     private feedbackDuration: number = 2000;
     deviceOrientationSubscription: any;
-    private deviceOrientation: DeviceOrientation;
     private direction: number;
     successColor: string;
 
     private DIRECTION_TRESHOLD: number = 22.5
 
-    constructor() { }
+    constructor(private orientationService: OrigamiOrientationService) { }
 
-    init(map: any, geolocationService: OrigamiGeolocationService, deviceOrientation: DeviceOrientation, helperService: HelperService, toastController: ToastController, trackerService: TrackerService, playingGamePage: PlayingGamePage) {
+    init(map: any, geolocationService: OrigamiGeolocationService, helperService: HelperService, toastController: ToastController, trackerService: TrackerService, playingGamePage: PlayingGamePage) {
         this.map = map
         this.geolocationService = geolocationService
         this.helperService = helperService
         this.toastController = toastController
         this.trackerService = trackerService
         this.playingGamePage = playingGamePage
-        this.deviceOrientation = deviceOrientation
 
         this.successColor = getComputedStyle(document.documentElement).getPropertyValue('--ion-color-success');
 
@@ -109,14 +105,9 @@ export class FeedbackComponent {
                 }
             }
         });
-
-        this.deviceOrientationSubscription = this.deviceOrientation
-            .watchHeading({
-                frequency: 300
-            })
-            .subscribe((data: DeviceOrientationCompassHeading) => {
-                this.direction = data.magneticHeading
-            })
+        this.deviceOrientationSubscription = this.orientationService.orientationSubscription.subscribe((heading: number) => {
+            this.direction = heading
+        })
     }
 
     public setTask(task: Task) {

diff --git a/src/app/mapControllers/layer-control.ts b/src/app/mapControllers/layer-control.ts
@@ -1,14 +1,9 @@
 import { Marker, Map as MapboxMap } from "mapbox-gl";
 import { MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
 import MapboxCompare from "mapbox-gl-compare";
-import { ElementRef, Injectable, ViewChild } from '@angular/core';
-import {
-    DeviceOrientation,
-    DeviceOrientationCompassHeading
-} from "@ionic-native/device-orientation/ngx";
-import { Subscription, Observable, Subscriber, fromEvent } from 'rxjs';
+import { ElementRef } from '@angular/core';
+import { Subscription, Observable, fromEvent } from 'rxjs';
 import { AlertController, Platform } from '@ionic/angular';
-import { shareReplay } from 'rxjs/operators';
 
 
 export enum LayerType {
@@ -48,7 +43,7 @@ export class LayerControl {
 
     public swipeClickSubscription: Observable<any> = null;
 
-    constructor(map: MapboxMap, mapWrapper: ElementRef, private deviceOrientation: DeviceOrientation, alertController: AlertController, platform: Platform) {
+    constructor(map: MapboxMap, mapWrapper: ElementRef, alertController: AlertController, platform: Platform) {
         this.map = map;
         this.alertController = alertController;
         this.platform = platform;

diff --git a/src/app/mapControllers/rotation-control.ts b/src/app/mapControllers/rotation-control.ts
@@ -1,9 +1,6 @@
-import { IControl, Map as MapboxMap } from "mapbox-gl";
-import {
-    DeviceOrientation,
-    DeviceOrientationCompassHeading
-} from "@ionic-native/device-orientation/ngx";
+import { Map as MapboxMap } from "mapbox-gl";
 import { Subscription } from 'rxjs';
+import { OrigamiOrientationService } from '../services/origami-orientation.service';
 
 export enum RotationType {
     Manual,
@@ -14,14 +11,11 @@ export enum RotationType {
 
 export class RotationControl {
     private deviceOrientationSubscription: Subscription;
-    private deviceOrientation: DeviceOrientation
     private rotationType: RotationType = RotationType.Manual
 
     private map: MapboxMap;
 
-    constructor(map: MapboxMap) {
-        this.deviceOrientation = new DeviceOrientation()
-
+    constructor(map: MapboxMap, private orientationService: OrigamiOrientationService) {
         this.map = map;
         this.rotate();
     }
@@ -56,13 +50,12 @@ export class RotationControl {
             case RotationType.Auto:
                 this.map.dragRotate.disable();
                 this.map.touchZoomRotate.disableRotation();
-                this.deviceOrientationSubscription = this.deviceOrientation
-                    .watchHeading({ frequency: 10 })
-                    .subscribe((data: DeviceOrientationCompassHeading) => {
-                        requestAnimationFrame(() => {
-                            this.map.rotateTo(data.magneticHeading, { duration: 20 });
-                        })
+
+                this.deviceOrientationSubscription = this.orientationService.orientationSubscription.subscribe((heading: number) => {
+                    requestAnimationFrame(() => {
+                        this.map.rotateTo(heading, { duration: 20 });
                     })
+                })
                 break;
             case RotationType.Button:
 

diff --git a/src/app/mapControllers/view-direction-control.ts b/src/app/mapControllers/view-direction-control.ts
@@ -1,10 +1,7 @@
 import { Map as MapboxMap } from "mapbox-gl";
-import {
-    DeviceOrientation,
-    DeviceOrientationCompassHeading
-} from "@ionic-native/device-orientation/ngx";
 import { Subscription } from 'rxjs';
 import { OrigamiGeolocationService } from '../services/origami-geolocation.service';
+import { OrigamiOrientationService } from '../services/origami-orientation.service';
 
 export enum ViewDirectionType {
     None,
@@ -15,19 +12,16 @@ export enum ViewDirectionType {
 
 export class ViewDirectionControl {
     private deviceOrientationSubscription: Subscription;
-    private deviceOrientation: DeviceOrientation
     private positionSubscription: Subscription;
     private viewDirectionType: ViewDirectionType = ViewDirectionType.None
 
     private map: MapboxMap;
 
     private isInitalized = false;
 
-    constructor(map: MapboxMap, deviceOrientation: DeviceOrientation, private geolocationService: OrigamiGeolocationService) {
+    constructor(map: MapboxMap, private geolocationService: OrigamiGeolocationService, private orientationService: OrigamiOrientationService) {
         this.map = map;
 
-        this.deviceOrientation = deviceOrientation;
-
         this.positionSubscription = this.geolocationService.geolocationSubscription.subscribe(
             position => {
                 if (this.map != undefined && this.isInitalized) {
@@ -38,17 +32,14 @@ export class ViewDirectionControl {
                 }
             }
         );
-        this.deviceOrientationSubscription = this.deviceOrientation
-            .watchHeading({
-                frequency: 300
-            })
-            .subscribe((data: DeviceOrientationCompassHeading) => {
-                this.map.setLayoutProperty(
-                    "viewDirection",
-                    "icon-rotate",
-                    data.magneticHeading - this.map.getBearing()
-                );
-            })
+        this.deviceOrientationSubscription = this.orientationService.orientationSubscription.subscribe((heading: number) => {
+            this.map.setLayoutProperty(
+                "viewDirection",
+                "icon-rotate",
+                heading - this.map.getBearing()
+            );
+        })
+
         this.map.loadImage(
             "/assets/icons/directionv2.png",
             (error, image) => {
@@ -137,6 +128,5 @@ export class ViewDirectionControl {
         if (this.deviceOrientationSubscription != undefined) {
             this.deviceOrientationSubscription.unsubscribe();
         }
-        // navigator.geolocation.clearWatch(this.positionWatch);
     }
 }
diff --git a/src/app/pages/create-game/create-game-list/create-game-list.module.ts b/src/app/pages/create-game/create-game-list/create-game-list.module.ts
@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
 
 import { CreateGameListPage } from './create-game-list.page';
 
-import { FileTransfer } from '@ionic-native/file-transfer/ngx';
 
 const routes: Routes = [
   {
@@ -24,9 +23,6 @@ const routes: Routes = [
     RouterModule.forChild(routes)
   ],
   declarations: [CreateGameListPage],
-  providers: [
-    FileTransfer,
-    // WebView
-  ]
+  providers: []
 })
 export class CreateGameListPageModule { }
diff --git a/src/app/pages/create-game/create-info-modal/create-info-modal.component.html b/src/app/pages/create-game/create-info-modal/create-info-modal.component.html
@@ -38,17 +38,7 @@ <h5>Audiobotschaft</h5>
 
   <h5>Fotos und Grafiken</h5>
 
-  <div class="photo-wrapper">
-    <ion-thumbnail slot="start" *ngIf="task?.question?.photo">
-      <img [src]="task.question.photo">
-    </ion-thumbnail>
-    <ion-button color="warning" size="default" (click)=capturePhoto(false)>
-      <ion-icon slot="icon-only" name="camera"></ion-icon>
-    </ion-button>
-    <ion-button color="warning" size="default" (click)=capturePhoto(true)>
-      <ion-icon slot="icon-only" name="images"></ion-icon>
-    </ion-button>
-  </div>
+  <app-photo-upload theme="warning" [(photo)]="task.question.photo"></app-photo-upload>
 
   <h5>Weitere Einstellungen</h5>
 

diff --git a/src/app/pages/create-game/create-info-modal/create-info-modal.component.ts b/src/app/pages/create-game/create-info-modal/create-info-modal.component.ts
@@ -1,10 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ModalController } from "@ionic/angular";
-import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
 import { MapFeaturesModalPage } from './../map-features-modal/map-features-modal.page';
-import { environment } from 'src/environments/environment';
-import { FileTransfer, FileTransferObject } from '@ionic-native/file-transfer/ngx';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { QuestionType, AnswerType } from 'src/app/models/types';
 import { standardMapFeatures } from 'src/app/models/standardMapFeatures';
 import { cloneDeep } from 'lodash';
@@ -24,8 +20,6 @@ export class CreateInfoModalComponent implements OnInit, OnChanges {
 
   constructor(
     public modalController: ModalController,
-    private transfer: FileTransfer,
-    private sanitizer: DomSanitizer
   ) { }
 
   ngOnInit() {
@@ -53,33 +47,6 @@ export class CreateInfoModalComponent implements OnInit, OnChanges {
     this.taskChange.emit(this.task)
   }
 
-  async capturePhoto(library: boolean = false) {
-
-    const image = await Plugins.Camera.getPhoto({
-      quality: 50,
-      allowEditing: false,
-      resultType: CameraResultType.Uri,
-      source: library ? CameraSource.Photos : CameraSource.Camera,
-      width: 500
-    });
-
-    this.task.question.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image.webPath);
-
-    this.uploading = true;
-
-    const fileTransfer: FileTransferObject = this.transfer.create();
-    fileTransfer.upload(image.path, `${environment.apiURL}/upload`).then(res => {
-      console.log(JSON.parse(res.response))
-      const filename = JSON.parse(res.response).filename
-      this.task.question.photo = `${environment.apiURL}/file/${filename}`
-      this.uploading = false;
-    })
-      .catch(err => {
-        console.log(err)
-        this.uploading = false;
-      })
-  }
-
   async presentMapFeaturesModal() {
     const modal = await this.modalController.create({
       component: MapFeaturesModalPage,