Task/DES-1760 External Tile Servers and QMS search (#39)

* Tile layer list interface

* Add tile layer interface with QMS integration.

* Handle text overflows.

* Upstream stuff.

* Upstream stuff.

* Upstream stuff.

* Upstream stuff.

* Merge master.

* Better attribution input.

* Remove logs.

* Geoapi for tile servers.

* More backend updates and UI adjustments.

* Edit layers interface.

* Improve tile server listing.

* Refactor and add WMS configuration options.

* Refactor and polish.

* Default Tile Suggestions.

* Resolve layer option update problem, add notifications, and add apply fixes.

* Quick fix.

* Modal for confirming deletion and disabled save button on dirty options.

* Fix branching for saveTileServers.

* Reverse layer order.

* Reduce padding on tile list and allow larger items to work properly.

src/app/app.module.ts

@@ -36,6 +36,7 @@ import { FeatureGeometryComponent } from './components/feature-geometry/feature-
 import { PointCloudsPanelComponent } from './components/point-clouds-panel/point-clouds-panel.component';
 import { PointCloudPanelRowComponent } from './components/point-cloud-panel-row/point-cloud-panel-row.component';
 import { ModalCreateOverlayComponent } from './components/modal-create-overlay/modal-create-overlay.component';
+import { ModalCreateTileServerComponent } from './components/modal-create-tile-server/modal-create-tile-server.component';
 import { FileTreeNodeComponent } from './components/file-tree-node/file-tree-node.component';
 import { ModalPointCloudInfoComponent } from './components/modal-point-cloud-info/modal-point-cloud-info.component';
 import { FileBrowserComponent } from './components/file-browser/file-browser.component';
@@ -45,6 +46,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { ModalConfirmationBodyComponent } from './components/modal-confirmation-body/modal-confirmation-body.component';
 import { UserRowComponent } from './components/user-row/user-row.component';
 import { EditNameInputComponent } from './components/edit-name-input/edit-name-input.component';
+import {DragDropModule, CDK_DRAG_CONFIG} from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations: [
@@ -67,6 +69,7 @@ import { EditNameInputComponent } from './components/edit-name-input/edit-name-i
     PointCloudsPanelComponent,
     PointCloudPanelRowComponent,
     ModalCreateOverlayComponent,
+    ModalCreateTileServerComponent,
     FileTreeNodeComponent,
     ModalPointCloudInfoComponent,
     FileBrowserComponent,
@@ -91,7 +94,8 @@ import { EditNameInputComponent } from './components/edit-name-input/edit-name-i
     BsDropdownModule.forRoot(),
     TooltipModule.forRoot(),
     TabsModule.forRoot(),
-    ToastrModule.forRoot()
+    ToastrModule.forRoot(),
+    DragDropModule
   ],
   providers: [
     AuthService,
@@ -109,6 +113,14 @@ import { EditNameInputComponent } from './components/edit-name-input/edit-name-i
     {
       provide: APP_BASE_HREF,
       useValue: environment.baseHref
+    },
+    {
+      provide: CDK_DRAG_CONFIG,
+      useValue: {
+        dragStartThreshold: 30,
+        pointerDirectionChangeThreshold: 5,
+        zIndex: 10000
+      }
     }
   ],
   bootstrap: [AppComponent],
@@ -118,7 +130,7 @@ import { EditNameInputComponent } from './components/edit-name-input/edit-name-i
     ModalFileBrowserComponent,
     ModalCreatePointCloudComponent,
     ModalCreateOverlayComponent,
+    ModalCreateTileServerComponent,
     ModalPointCloudInfoComponent]
 })
 export class AppModule { }
-

src/app/components/edit-name-input/edit-name-input.component.styl

@@ -16,7 +16,7 @@
         overflow: hidden
         text-overflow: ellipsis
         white-space: nowrap
-        height: 16px
+        height: 18px
         line-height: 1.0
     #property-input
         display: inline-block
@@ -27,7 +27,7 @@
         border: 0px solid #f0f0f0
         -webkit-border-radius: 0px
         border-radius: 0px
-        height: 16px
+        height: 18px
         line-height: 1.0        
     #property-textarea
         display: inline-block

src/app/components/layers-panel/layers-panel.component.html

@@ -1,12 +1,109 @@
 <div class="dock-panel">
   <div class="dock-panel-content">
     <p class="dock-panel-title"> Layers </p>
-    <h6> Basemap</h6>
-    <div class="button-group small expanded">
-      <button [ngClass]="{'success': basemap=='sat', 'hollow': basemap!='sat'}" class="button" (click)="selectBasemap('sat')">Satellite</button>
-      <button [ngClass]="{'success': basemap=='roads', 'hollow': basemap!='roads'}"class="button" (click)="selectBasemap('roads')">Roads</button>
+    <h6>Tile Layers</h6>
+    <button class="button expanded hollow tiny success"
+            (click)="openCreateTileServerModal()">
+      <i class="fa fa-plus"></i>
+    </button>
+    <div #cdkList
+         cdkDropList class="tile-servers-list"
+         (cdkDropListDropped)="drop($event)">
+      <div *ngFor="let ts of tileServers"
+           class="tile-servers"
+           cdkDragLockAxis="y"
+           cdkDragBoundary=".tile-servers-list"
+           (cdkDragStarted)="changeMovePointer($event, cdkList, true)"
+           (cdkDragReleased)="changeMovePointer($event, cdkList, false)"
+           cdkDrag>
+        <div [ngStyle]="{'min-height.px': height}" class="drag-list-placeholder" *cdkDragPlaceholder></div>
+        <div class="grid-x tile-server-container">
+          <div class="grid-x small-8 tile-server-left">
+            <div #gripHandle
+                 cdkDragHandle
+                 class="tile-server-move">
+              <i class="fas fa-grip-vertical"></i>
+            </div>
+            <label class="tile-server-visibility">
+              <input name=""
+                     type="checkbox"
+                     [checked]="ts.uiOptions.isActive"
+                     (change)="toggleTileServer(ts)"/>
+              <i class="fas fa-eye-slash unchecked"></i>
+              <i class="fas fa-eye checked"></i>
+            </label>
+            <div class="tile-server-name-container">
+              <input #activeText
+                     id=property-input
+                     type="text"
+                     *ngIf="ts.uiOptions.showInput"
+                     (blur)="updateName(activeText.value, ts)"
+                     (keyup.enter)="updateName(activeText.value, ts)"
+                     [value]="ts.name">
+              <div id="tile-server-name"
+                   class="tile-server-name"
+                   data-tooltip
+                   tabindex="1"
+                   title="{{ts.name}}"
+                   data-position="top"
+                   data-alignment="left"
+                   *ngIf="!ts.uiOptions.showInput"
+                   (dblclick)="showInput(ts, true)">
+                {{ts.name}}
+              </div>
+            </div>
+          </div>
+
+          <div class="cell small-4 grid-x tile-server-right">
+            <button class="button secondary clear edit-buttons">
+              <i class="fas fa-edit edit-button"
+                 (click)="showInput(ts, true)"
+                 *ngIf="!ts.uiOptions.showInput"></i>
+              <i class="fas fa-check edit-button"
+                 (click)="showInput(ts, false)"
+                 *ngIf="ts.uiOptions.showInput"></i>
+            </button>
+            <button class="button secondary clear option-button"
+                    (click)="toggleDescription(ts)">
+              <i class="fas fa-sliders-h" ></i>
+            </button>
+            <button class="button secondary clear button-no-margin delete-button"
+                    (click)="openDeleteTileServerModal(deleteTiles)">
+              <i class="fa fa-trash"></i>
+            </button>
+
+            <ng-template #deleteTiles>
+              <p>Confirm Deletion?</p>
+              <div class="button-group">
+                <button type="button" class="button secondary" (click)="deleteTileServer(ts); modalRef.hide()" >Yes</button>
+                <button type="button" class="button primary" (click)="modalRef.hide()" >No</button>
+              </div>
+            </ng-template>
+
+          </div>
+        </div>
+        <div *ngIf="ts.uiOptions.showDescription">
+          <div class="grid-x row tile-server-description">
+            <label class="small-4 align-self-middle">Opacity</label>
+            <input #slider type="range" min="0" max="1" step="0.1" [value]="ts.uiOptions.opacity" class="slider small-8 align-self-middle tile-server-slider" id="myRange" (change)="setLayerOpacity(ts, slider.value)">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div *ngIf="dirtyOptions" class="tile-server-dirty-options">
+      <i class="tile-server-dirty-options-warning">
+        Layer options have been changed!
+        <br>
+        Save to persist changes.
+      </i>
+    </div>
+
+    <div class="tile-server-save-button">
+      <button class="button small success" [disabled]="!dirtyOptions" (click)="saveTileOptions()">Save Layer Options</button>
     </div>
     <hr>
+
     <h6> Overlays </h6>
     <button class="button expanded hollow tiny success" (click)="openCreateOverlayModal()">
       <i class="fa fa-plus"></i>
@@ -21,7 +118,7 @@ <h6> Overlays </h6>
         </div>
         <div class="cell grid-x auto align-right">
             <button
-              class="button tiny hollow alert button-no-margin"
+              class="button hollow tiny alert button-no-margin"
               (click)="deleteOverlay(ov)"
             >
               <i class="fa fa-trash"></i>
@@ -30,6 +127,4 @@ <h6> Overlays </h6>
       </div>
     </div>
   </div>
-
 </div>
-

src/app/components/layers-panel/layers-panel.component.styl

@@ -13,6 +13,109 @@
     .active-overlay
       background-color lightgreen
     >.overlay-content
-      padding 5px;
+      padding 5px
       .button-no-margin
         margin 0
+  .tile-servers-list
+    padding-bottom: 15px
+    .tile-servers
+      background-color: #fff;
+      padding: 10px
+      .tile-server-container
+        .tile-server-left
+          padding-left: 5px
+          .tile-server-move
+            width: 20px
+            opacity: 0
+            transition: 0.2s
+            cursor: move
+          .tile-server-visibility
+            cursor: pointer
+            width: 20px
+            input[type="checkbox"],
+            .checked
+              display: none
+            input[type="checkbox"]:checked ~ .checked
+              display: inline
+            input[type="checkbox"]:checked ~ .unchecked
+              display: none
+          .tile-server-name-container
+            max-width: 90px
+            #property-input
+              display: inline-block
+              width: 100%
+              font-size: 16px
+              padding: 0px
+              padding-left: 5px
+              margin: 0px
+              border: 0px solid #f0f0f0
+              -webkit-border-radius: 0px
+              border-radius: 0px
+              border: 1px solid #888
+              box-shadow: 0px 0px;
+              height: 100%
+            .tile-server-name
+              max-width: 90px
+              width: 90px
+              overflow: hidden
+              text-overflow: ellipsis
+              white-space: nowrap
+              padding-left: 5px
+              font-size: 16px
+              height: 100%
+              border: 1px solid #fff
+              transition: 0.5s
+            #tile-server-name:hover
+              border: 1px solid #ccc
+        .tile-server-right
+          justify-content: center
+          .edit-buttons
+            padding: 0px 0px
+            margin: 0
+            line-height: 0
+            .edit-button
+              width: 17px
+          .option-button
+            padding: 0px 3px
+            margin: 0
+            line-height: 0
+          .delete-button
+            padding: 0
+            margin: 0
+            line-height: 0
+      .tile-server-container:hover
+        .tile-server-left
+          .tile-server-move
+            opacity: 1
+      .tile-server-description
+        padding: 15px 10px
+        .tile-server-slider
+          margin: 0
+  .tile-server-dirty-options
+    text-align: center
+    padding-bottom: 15px
+    .tile-server-dirty-options-warning
+      color: #2e1800
+      font-size: 13px
+  .tile-server-save-button
+    width: 100%
+    display: flex
+    justify-content: center
+  .drag-list-placeholder
+    min-height: 50px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+
+::ng-deep
+  .cdk-drag-placeholder
+    opacity: 0
+    min-height: 100px
+    background: #ccc
+  .cdk-drag-animating
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
+  .cdk-drag-preview
+    @extends :host .tile-servers-list .tile-servers
+    min-height: 50px;    
+    .tile-server-container
+      .tile-server-left
+        .tile-server-move
+          opacity: 1