update view components

Author: ryanslatten

service/src/models/event.js

@@ -76,6 +76,7 @@ const EventSchema = new Schema({
   _id: { type: Number, required: true },
   name: { type: String, required: true, unique: true },
   description: { type: String, required: false },
+  noGeometry: { type: Boolean, default: false },
   complete: { type: Boolean },
   collectionName: { type: String, required: true },
   teamIds: [{ type: Schema.Types.ObjectId, ref: 'Team' }],
@@ -110,7 +111,7 @@ EventSchema.virtual('id')
 async function uniqueViolationToValidationErrorHook(err, _, next) {
   if (err.code === 11000 || err.code === 11001) {
     err = new mongoose.Error.ValidationError()
-    err.errors = { name: { type: 'unique', message: 'Duplicate event name' }}
+    err.errors = { name: { type: 'unique', message: 'Duplicate event name' } }
   }
   return next(err)
 }
@@ -491,7 +492,7 @@ exports.update = function (id, event, options, callback) {
     options = {};
   }
 
-  const update = ['name', 'description', 'minObservationForms', 'maxObservationForms', 'complete', 'forms'].reduce(function(o, k) {
+  const update = ['name', 'description', 'noGeometry', 'minObservationForms', 'maxObservationForms', 'complete', 'forms'].reduce(function (o, k) {
     if (Object.prototype.hasOwnProperty.call(event, k)) {
       o[k] = event[k];
     }

web-app/admin/src/ng1/admin/events/event.edit.component.js

@@ -7,15 +7,17 @@ class AdminEventEditController {
 
   $onInit() {
     if (this.$stateParams.eventId) {
-      this.Event.get({id: this.$stateParams.eventId}, event => {
+      this.Event.get({ id: this.$stateParams.eventId }, event => {
         this.event = new this.Event({
           id: event.id,
           name: event.name,
-          description: event.description
+          description: event.description,
+          noGeometry: !!event.noGeometry
         });
       });
     } else {
       this.event = new this.Event();
+      this.event.noGeometry = false;
     }
   }
 

web-app/admin/src/ng1/admin/events/event.edit.html

@@ -27,18 +27,26 @@ <h2 ng-if="!$ctrl.event.id">New event</h2>
       <form ng-submit="$ctrl.saveEvent()" class="form">
         <div class="form-group">
           <label class="control-label">Name</label>
-          <input class="form-control" type="text" placeholder="Event name" ng-model="$ctrl.event.name"/>
+          <input class="form-control" type="text" placeholder="Event name" ng-model="$ctrl.event.name" />
         </div>
         <div class="form-group">
           <label class="control-label">Description</label>
-          <textarea class="form-control" type="text" placeholder="Brief description of the event." ng-model="$ctrl.event.description"></textarea>
+          <textarea class="form-control" type="text" placeholder="Brief description of the event."
+            ng-model="$ctrl.event.description"></textarea>
+        </div>
+        <div class="form-group">
+          <label>
+            <input type="checkbox" ng-model="$ctrl.event.noGeometry">
+            Disable Geometry data for new observations by default
+          </label>
         </div>
       </form>
 
       <div class="clearfix">
         <span class="pull-right">
           <a class="btn btn-default" ng-class="{'disabled': $ctrl.saving}" ng-click="$ctrl.cancel()">Cancel</a>
-          <a class="btn btn-success" ng-class="{'disabled': $ctrl.saving}" ng-click="$ctrl.saveEvent($ctrl.event)"><i class="fa fa-check"></i> Save</a>
+          <a class="btn btn-success" ng-class="{'disabled': $ctrl.saving}" ng-click="$ctrl.saveEvent($ctrl.event)"><i
+              class="fa fa-check"></i> Save</a>
         </span>
       </div>
 
@@ -51,4 +59,4 @@ <h2 ng-if="!$ctrl.event.id">New event</h2>
 
     </div>
   </div>
-</div>
+</div>

web-app/src/app/observation/observation-edit/observation-edit.component.html

@@ -33,13 +33,15 @@
         <observation-edit-date [formGroup]="formGroup.get('properties')"
           [definition]="timestampDefinition"></observation-edit-date>
 
-        <observation-edit-geometry [formGroup]="formGroup" [definition]="geometryDefinition"
-          [featureId]="observation.id" [featureStyle]="geometryStyle" (onFeatureEdit)="onGeometryEdit($event)">
-        </observation-edit-geometry>
-
         <mat-checkbox [formControl]="formGroup?.get('noGeometry')" style="margin-top: 16px;">
           {{ noGeometryLabel }}
         </mat-checkbox>
+
+        <ng-container *ngIf="!formGroup?.get('noGeometry')?.value">
+          <observation-edit-geometry [formGroup]="formGroup" [definition]="geometryDefinition"
+            [featureId]="observation.id" [featureStyle]="geometryStyle" (onFeatureEdit)="onGeometryEdit($event)">
+          </observation-edit-geometry>
+        </ng-container>
       </mat-card>
 
       <div class="edit-forms" cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="reorderForm($event)"

web-app/src/app/observation/observation-list/observation-list-item.component.html

@@ -49,13 +49,14 @@
         </div>
       </div>
 
-      <div class="item-thumbnail">
+      <div *ngIf="!observation?.noGeometry" class="item-thumbnail">
         <img [src]="observation?.style?.iconUrl" />
       </div>
     </div>
 
     <div *ngIf="attachments?.length && attachments[0]?.url" class="item-media" matCardImage>
-      <observation-attachment [attachment]="attachments[0]" [label]="attachments.length > 1 ? '1 of ' + attachments.length : false"></observation-attachment>
+      <observation-attachment [attachment]="attachments[0]"
+        [label]="attachments.length > 1 ? '1 of ' + attachments.length : false"></observation-attachment>
     </div>
   </div>
 
@@ -66,15 +67,15 @@
         <textarea matInput [(ngModel)]="importantEditor.description"></textarea>
       </mat-form-field>
       <div class="important__actions">
-        <button mat-button color="primary"
-          (click)="clearImportant()">{{observation?.important ? 'Remove' : 'Cancel'}}</button>
+        <button mat-button color="primary" (click)="clearImportant()">{{observation?.important ? 'Remove' :
+          'Cancel'}}</button>
         <button mat-flat-button color="primary" (click)="markAsImportant()"
           class="important__actions--confirm">{{observation?.important ? 'Update' : 'Flag As Important'}}</button>
       </div>
     </div>
 
     <div class="actions">
-      <div class="action-buttons">
+      <div *ngIf="!observation?.noGeometry" class="action-buttons">
         <button mat-button color="primary" (click)="onObservationLocationClick()" class="actions__location-button">
           <mat-icon class="actions__location-icon">my_location</mat-icon> {{observation?.geometry | geometry:5}}
         </button>
@@ -98,7 +99,8 @@
           <span *ngIf="favorites" class="actions__favorite-label">{{favorites}}</span>
         </div>
 
-        <a mat-icon-button [href]="downloadUrl()" class="actions--inactive" matTooltip="Download" matTooltipPosition="above">
+        <a mat-icon-button [href]="downloadUrl()" class="actions--inactive" matTooltip="Download"
+          matTooltipPosition="above">
           <mat-icon>save_alt</mat-icon>
         </a>
       </div>

web-app/src/app/observation/observation-view/observation-view.component.html

@@ -4,7 +4,7 @@
       <button mat-icon-button color="primary" (click)="onClose()">
         <mat-icon>arrow_back</mat-icon>
       </button>
-  
+
       <button *ngIf="canEdit" mat-button color="primary" (click)="editObservation()">EDIT</button>
     </mat-toolbar-row>
   </mat-toolbar>
@@ -60,18 +60,18 @@
           </div>
         </div>
 
-        <div class="item-thumbnail">
+        <div *ngIf="!observation?.noGeometry" class="item-thumbnail">
           <img [src]="observation.style.iconUrl" />
         </div>
       </div>
 
-      <div class="item-map">
+      <div *ngIf="!observation?.noGeometry" class="item-map">
         <div class="item-map__view">
           <map-clip [feature]="observation"></map-clip>
         </div>
       </div>
 
-      <div class="item-location">
+      <div *ngIf="!observation?.noGeometry" class="item-location">
         <button mat-button color="primary" (click)="onObservationLocationClick()" class="actions__location-button">
           <mat-icon class="actions__location-icon">my_location</mat-icon> {{observation?.geometry | geometry:5}}
         </button>
@@ -82,6 +82,10 @@
         </span>
       </div>
 
+      <div *ngIf="observation?.noGeometry" class="item-no-geometry">
+        <span>This observation does not have geometry data</span>
+      </div>
+
       <mat-divider></mat-divider>
 
       <div *ngIf="importantEditor.open" class="important" @important>
@@ -90,26 +94,34 @@
           <textarea matInput [(ngModel)]="importantEditor.description"></textarea>
         </mat-form-field>
         <div class="important__actions">
-          <button mat-button color="primary" (click)="clearImportant()">{{observation?.important ? 'Remove' : 'Cancel'}}</button>
-          <button mat-flat-button color="primary" (click)="markAsImportant()" class="important__actions--confirm">{{observation?.important ? 'Update' : 'Flag As Important'}}</button>
+          <button mat-button color="primary" (click)="clearImportant()">{{observation?.important ? 'Remove' :
+            'Cancel'}}</button>
+          <button mat-flat-button color="primary" (click)="markAsImportant()"
+            class="important__actions--confirm">{{observation?.important ? 'Update' : 'Flag As Important'}}</button>
         </div>
       </div>
 
       <mat-card-actions>
         <div class="actions">
-          <div *ngIf="observation?.favoriteUserIds?.length" class="favorites" (click)="showFavoriteUsers()" matRipple matRippleCentered="true" matRippleUnbounded="true">
+          <div *ngIf="observation?.favoriteUserIds?.length" class="favorites" (click)="showFavoriteUsers()" matRipple
+            matRippleCentered="true" matRippleUnbounded="true">
             <span class="favorites__count">{{observation?.favoriteUserIds?.length}}</span>
-            <span class="favorites__label">{{observation?.favoriteUserIds?.length === 1 ? "FAVORITE": "FAVORITES"}}</span>
+            <span class="favorites__label">{{observation?.favoriteUserIds?.length === 1 ? "FAVORITE":
+              "FAVORITES"}}</span>
           </div>
           <div class="actions-icons">
             <div *ngIf="canEditImportant">
-              <button mat-icon-button (click)="onFlagAsImportant()" class="actions--inactive" [ngClass]="{'actions__important--active': observation.important}" matTooltip="Flag As Important" matTooltipPosition="above">
+              <button mat-icon-button (click)="onFlagAsImportant()" class="actions--inactive"
+                [ngClass]="{'actions__important--active': observation.important}" matTooltip="Flag As Important"
+                matTooltipPosition="above">
                 <mat-icon>{{observation.important ? 'flag' : 'outlined_flag'}}</mat-icon>
               </button>
             </div>
 
             <div class="actions__favorite">
-              <button mat-icon-button (click)="toggleFavorite()" class="actions--inactive" [ngClass]="{'actions__favorite--active': isUserFavorite}" matTooltip="Add To Favorites" matTooltipPosition="above">
+              <button mat-icon-button (click)="toggleFavorite()" class="actions--inactive"
+                [ngClass]="{'actions__favorite--active': isUserFavorite}" matTooltip="Add To Favorites"
+                matTooltipPosition="above">
                 <mat-icon>{{isUserFavorite ? 'favorite' : 'favorite_border'}}</mat-icon>
               </button>
               <span *ngIf="favorites" class="actions__favorite-label">{{favorites}}</span>
@@ -124,7 +136,8 @@
     </mat-card>
 
     <div class="form-card" *ngFor="let form of observationForm?.forms; let i = index">
-      <observation-view-form [form]="form" [attachments]="observation.attachments" [expand]="i === 0"></observation-view-form>
+      <observation-view-form [form]="form" [attachments]="observation.attachments"
+        [expand]="i === 0"></observation-view-form>
     </div>
   </div>
 </div>