Merge branch 'sharing'

# Conflicts: # src/app/services/variety.service.ts
JanssenBrm · Oct 4, 2023 · b2dfeaf · b2dfeaf
2 parents af423d2 + e6dadb2
commit b2dfeaf
Show file tree

Hide file tree

Showing 33 changed files with 529 additions and 417 deletions.
diff --git a/src/app/login/login.page.ts b/src/app/login/login.page.ts
@@ -29,6 +29,7 @@ export class LoginPage implements OnInit {
       username: new FormControl('', Validators.required),
       password: new FormControl('', Validators.required),
     });
+    this.loading = false;
   }
 
   login() {
@@ -48,10 +49,6 @@ export class LoginPage implements OnInit {
     });
   }
 
-  signUp() {
-    this.router.navigate(['register']);
-  }
-
   async showError(message: string) {
     const toast = await this.toastController.create({
       message: message,

diff --git a/src/app/map/map.page.html b/src/app/map/map.page.html
@@ -5,14 +5,27 @@
   <app-search [class.mobile]="utilService.isMobile()" (setLocation)="zoomToLocation($event)"></app-search>
 </ion-content>
 
+<div id="legend">
+  <div class="legend-item">
+    <div class="color" [style.background-color]="getFeatureColors(true)[0]" [style.border-color]="getFeatureColors(true)[1]"></div>
+    <span>Your vineyards</span>
+  </div>
+  <div class="legend-item">
+    <div class="color" [style.background-color]="getFeatureColors(false)[0]" [style.border-color]="getFeatureColors(false)[1]"></div>
+    <span>Shared vineyards</span>
+  </div>
+</div>
+
 <div id="clickPopup" class="ol-popup">
   <a href="#" id="popup-closer" class="ol-popup-closer" (click)="closeClickPopup()"></a>
   <div [innerHTML]="clickText"></div>
 </div>
 <div id="popup" class="ol-popup">
-  <a href="#" id="popup-closer" class="ol-popup-closer" (click)="closePopup()"></a>
   <div id="popup-content">
-    <div class="title">{{activeVineyard?.name}}</div>
+    <div class="title">
+      {{activeVineyard?.name}}
+      <div *ngIf="activeVineyard?.shared" class="chip" [style.background-color]="getFeatureColors(true)[1]">Shared</div>
+    </div>
     <div class="row">
       <div class="icon">
         <ion-icon name="home-outline"></ion-icon>
@@ -52,7 +65,7 @@
     </div>
   </div>
 </div>
-<ion-fab vertical="bottom" horizontal="start" slot="fixed">
+<ion-fab [vertical]="utilService.isMobile() ? 'center' : 'bottom'" horizontal="start" slot="fixed">
   <ion-fab-button href="https://github.com/JanssenBrm/vineyards/issues/new?template=bug_report.md'">
     <ion-icon name="bug-outline"></ion-icon>
   </ion-fab-button>

diff --git a/src/app/map/map.page.scss b/src/app/map/map.page.scss
@@ -1,82 +1,129 @@
 #map {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .ol-popup {
-    position: absolute;
-    background-color: white;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
-    color: black;
-    padding: 1rem;
-    border-radius: 10px;
-    border: 1px solid #cccccc;
-    bottom: 12px;
-    left: -50px;
-    min-width: 280px;
-  }
-  .ol-popup:after, .ol-popup:before {
-    top: 100%;
-    border: solid transparent;
-    content: " ";
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-  .ol-popup:after {
-    border-top-color: white;
-    border-width: 10px;
-    left: 48px;
-    margin-left: -10px;
-  }
-  .ol-popup:before {
-    border-top-color: #cccccc;
-    border-width: 11px;
-    left: 48px;
-    margin-left: -11px;
-  }
-  .ol-popup-closer {
-    text-decoration: none;
-    position: absolute;
-    top: .5rem;
-    right: .5rem;
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  color: black;
+  padding: 1rem;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
+}
+
+.ol-popup-closer:after {
+  content: "✖";
+}
+
+#popup-content {
+  font-size: smaller;
+
+  .title {
+    font-weight: bold;
+    margin-bottom: .5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .chip {
+      color: white;
+      padding: .25rem 0.5rem;
+      border-radius: var(--ion-border-radius);
+
+    }
   }
-  .ol-popup-closer:after {
-    content: "✖";
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: .25rem;
+
+    .icon {
+      margin-right: .5rem;
+      color: #9c9c9c
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      justify-content: flex-end;
+    }
   }
 
-  #popup-content {
-      font-size: smaller;
-
-      .title {
-          font-weight: bold;
-          margin-bottom: .5rem;
-      }
-      .row {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          margin-bottom: .25rem;
-
-          .icon {
-              margin-right: .5rem;
-              color: #9c9c9c
-          }
-          .actions {
-              display: flex;
-              flex-direction: row;
-              width: 100%;
-              justify-content: flex-end;
-          }
-      }
-      .col {
-          display: flex;
-          flex-direction: column;
-      }
+  .col {
+    display: flex;
+    flex-direction: column;
   }
+}
 
 
 ion-fab-button {
   margin-top: .5rem;
+}
+
+
+#legend {
+  position: absolute;
+  right: calc(1rem + 2px);
+  top: 10rem;
+  background-color: white;
+  padding: 1rem;
+  border-radius: var(--ion-border-radius);
+  font-size: smaller;
+  display: flex;
+  flex-direction: column;
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin: 0.25rem 0;
+
+    .color {
+      height: 24px;
+      width: 24px;
+      border-width: 2px;
+      border-style: solid;
+      margin-right: 1rem;
+
+    }
+
+  }
 }
diff --git a/src/app/map/map.page.ts b/src/app/map/map.page.ts
@@ -33,6 +33,7 @@ import { ModalController } from '@ionic/angular';
 import { AddVineyardComponent } from './addvineyard/addvineyard.component';
 import { ConfirmComponent } from '../shared/components/confirm/confirm.component';
 import { NON_PREMIUM_ROLES } from '../models/userdata.model';
+import { Fill, Stroke, Style } from 'ol/style';
 
 @Component({
   selector: 'app-map',
@@ -368,8 +369,21 @@ export class MapPage implements OnInit, AfterViewInit {
     }
   }
 
-  private _getSnapInteraction(): Snap {
-    return new Snap({ source: this._featureLayer.getSource() });
+  private _getFeatureStyle(feature: Feature): Style {
+    const [fill, stroke] = this.getFeatureColors(feature.get('shared'));
+    return new Style({
+      fill: new Fill({
+        color: fill,
+      }),
+      stroke: new Stroke({
+        color: stroke,
+        width: 2,
+      }),
+    });
+  }
+
+  public getFeatureColors(shared: boolean): [string, string] {
+    return shared ? ['rgba(193,95,232,0.5)', 'rgb(175,86,210)'] : ['rgba(95, 118, 232, 0.5)', 'rgb(86,107,210)'];
   }
 
   private _getFeatureLayer(): VectorLayer {
@@ -378,6 +392,7 @@ export class MapPage implements OnInit, AfterViewInit {
       source: new VectorSource({
         features: [],
       }),
+      style: (feature) => this._getFeatureStyle(feature),
     });
   }
 
@@ -403,6 +418,7 @@ export class MapPage implements OnInit, AfterViewInit {
                   geometry: v.location,
                   name: v.id,
                   title: v.name,
+                  shared: v.shared,
                 })
             )
           );
@@ -432,10 +448,6 @@ export class MapPage implements OnInit, AfterViewInit {
       });
   }
 
-  logout() {
-    this.authService.logout();
-  }
-
   zoomToLocation(extent: number[]) {
     this.view.fit(buffer(transformExtent(extent, 'EPSG:4326', 'EPSG:3857'), 100));
   }

diff --git a/src/app/models/vineyard.model.ts b/src/app/models/vineyard.model.ts
@@ -19,7 +19,15 @@ export interface MeteoStatEntry {
 export interface MeteoStats {
   data: MeteoStatEntry[];
 }
-export interface Vineyard {
+
+export enum VineyardPermissions {
+  NONE,
+  VIEW,
+  EDIT,
+  OWNER,
+}
+
+export interface VineyardBase {
   id?: string;
   name: string;
   address?: string;
@@ -28,3 +36,10 @@ export interface Vineyard {
   varieties: Variety[];
   meteo: MeteoStats;
 }
+
+export interface Vineyard extends VineyardBase {
+  shared: boolean;
+  permissions: VineyardPermissions;
+  owner: string;
+  ownerName?: string;
+}
diff --git a/src/app/models/vineyarddoc.model.ts b/src/app/models/vineyarddoc.model.ts
@@ -1,5 +1,13 @@
-import { Vineyard } from './vineyard.model';
+import { VineyardBase, VineyardPermissions } from './vineyard.model';
 
-export interface VineyardDoc extends Vineyard {
+export interface VineyardDoc extends VineyardBase {
   location: string;
 }
+
+export interface VineyardPermissionsDoc {
+  permissions: VineyardPermissions;
+}
+export interface SharedVineyardDoc {
+  user: string;
+  vineyard: string;
+}