Micro: Added nest to images scroll on micrograph workspace

StraboSpot · Aug 9, 2018 · fa7430d · fa7430d
1 parent f1189bd
commit fa7430d
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 54 deletions.
diff --git a/www/app/maps/thin-section/thin-section.controller.js b/www/app/maps/thin-section/thin-section.controller.js
@@ -25,22 +25,24 @@
     var tagsToAdd = [];
     var switchers = {};
 
-    //vm.addIntervalModal = {};
     vm.allTags = [];
+    vm.childGenerations = [];
     vm.clickedFeatureId = undefined;
     vm.data = {};
     vm.images = [];
     vm.imagesSelected = [];
     vm.isNesting = SpotFactory.getActiveNesting();
     vm.newNestModal = {};
     vm.newNestProperties = {};
+    vm.parentGenerations = [];
     vm.popover = {};
     vm.saveEditsText = 'Save Edits';
     vm.showSaveEditsBtns = {};
     vm.thisSpotWithThinSection = {};
 
     vm.closeModal = closeModal;
     vm.createTag = createTag;
+    vm.getImages = getImages;
     vm.getImageSrc = getImageSrc;
     vm.goBack = goBack;
     vm.goToSpot = goToSpot;
@@ -71,6 +73,9 @@
       //MapEmogeosFactory.clearSelectedSpot();
 
       getSpotWithThinSection();
+      gatherSpotGenerations();
+      gatherImages();
+
       createModals();
       createPopover();
       createPageEvents();
@@ -406,24 +411,75 @@
         });
       }
 
-      var childrenSpots = SpotFactory.getChildrenSpots(vm.thisSpotWithThinSection);
-      _.each(childrenSpots, function (spot) {
-        _.each(spot.properties.images, function (image) {
-          if (image.image_type === 'micrograph_ref' || image.image_type === 'micrograph') vm.images.push(image);
-          var promise = ImageFactory.getImageById(image.id).then(function (src) {
-            if (IS_WEB) imageSources[image.id] = "https://strabospot.org/pi/" + image.id;
-            else if (src) imageSources[image.id] = src;
-            else imageSources[image.id] = 'img/image-not-found.png';
+      _.each(vm.childGenerations, function (childGeneration) {
+        _.each(childGeneration, function (spot) {
+          _.each(spot.properties.images, function (image) {
+            vm.images.push(image);
+            var promise = ImageFactory.getImageById(image.id).then(function (src) {
+              if (IS_WEB) imageSources[image.id] = "https://strabospot.org/pi/" + image.id;
+              else if (src) imageSources[image.id] = src;
+              else imageSources[image.id] = 'img/image-not-found.png';
+            });
+            promises.push(promise);
           });
-          promises.push(promise);
         });
       });
+
+      _.each(vm.parentGenerations, function (parentGeneration) {
+        _.each(parentGeneration, function (spot) {
+          _.each(spot.properties.images, function (image) {
+            vm.images.push(image);
+            var promise = ImageFactory.getImageById(image.id).then(function (src) {
+              if (IS_WEB) imageSources[image.id] = "https://strabospot.org/pi/" + image.id;
+              else if (src) imageSources[image.id] = src;
+              else imageSources[image.id] = 'img/image-not-found.png';
+            });
+            promises.push(promise);
+          });
+        });
+      });
+
       $log.log('All Images:', vm.images);
       return $q.all(promises).then(function () {
         //$log.log('Image Sources:', imageSources);
       });
     }
 
+    // Gather 5 generations up and down from current Spot with Micrograph Reference
+    function gatherSpotGenerations() {
+      function getChildren(spots) {
+        var allChildrenSpots = [];
+        _.each(spots, function (spot) {
+          var childrenSpots = SpotFactory.getChildrenSpots(spot);
+          if (!_.isEmpty(childrenSpots)) allChildrenSpots.push(childrenSpots);
+        });
+        return _.flatten(allChildrenSpots);
+      }
+
+      function getParents(spots) {
+        var allParentSpots = [];
+        _.each(spots, function (spot) {
+          var parentSpots = SpotFactory.getParentSpots(spot);
+          if (!_.isEmpty(parentSpots)) allParentSpots.push(parentSpots);
+        });
+        return _.flatten(allParentSpots);
+      }
+
+      var parentSpots = [vm.thisSpotWithThinSection];
+      _.times(5, function (i) {
+        parentSpots = getParents(parentSpots);
+        if (!_.isEmpty(parentSpots)) vm.parentGenerations.push(parentSpots);
+      });
+      $log.log('parentGenerations', vm.parentGenerations);
+
+      var childSpots = [vm.thisSpotWithThinSection];
+      _.times(5, function (i) {
+        childSpots = getChildren(childSpots);
+        if (!_.isEmpty(childSpots)) vm.childGenerations.push(childSpots);
+      });
+      $log.log('childGenerations', vm.childGenerations);
+    }
+
     // Get only the Spots where the image_basemap id matches the id of one of the linked images being loaded
     function gatherSpotsOnImage(imageId) {
       var activeSpots = SpotFactory.getActiveSpots();
@@ -441,7 +497,6 @@
       // Get the Spot that has this Thin Section
       //vm.thisSpotWithThinSection = ThinSectionFactory.getSpotWithThisThinSection($state.params.thinSectionId);
       vm.thisSpotWithThinSection = SpotFactory.getSpotWithImageId($state.params.thinSectionId);
-      gatherImages();
       $log.log('thisSpotWithThinSection', vm.thisSpotWithThinSection);
     }
 
@@ -532,6 +587,11 @@
       $location.path('/app/tags/' + id);
     }
 
+    function getImages(spot) {
+      if (!_.isEmpty(spot.properties.images)) return spot.properties.images;
+      return [];
+    }
+
     function getImageSrc(imageId) {
       return imageSources[imageId] || 'img/loading-image.png';
     }

diff --git a/www/app/maps/thin-section/thin-section.directive.html b/www/app/maps/thin-section/thin-section.directive.html
@@ -0,0 +1,81 @@
+<div>
+  <div class="side-images-scroll">
+
+    <div ng-repeat='generation in vm.parentGenerations | orderBy:"+": true track by $index'>
+      <div>
+        <span ng-if='vm.parentGenerations.length - $index - 1 === 0'>1st</span>
+        <span ng-if='vm.parentGenerations.length - $index - 1 === 1'>2nd</span>
+        <span ng-if='vm.parentGenerations.length - $index - 1 === 2'>3rd</span>
+        <span ng-if='vm.parentGenerations.length - $index - 1 === 3'>4th</span>
+        <span ng-if='vm.parentGenerations.length - $index - 1 === 4'>5th</span>
+        <span>Generation Parents</span>
+        <div class='nest-block'>
+          <div ng-repeat='spot in generation'>
+            <strabo-spot-directive></strabo-spot-directive>
+            <div ng-repeat='image in vm.getImages(spot) track by image.id' ng-click='vm.toggleImageSelected(image)'>
+              <ion-label class='micrograph-nest-image-label'>{{ image.title || 'Untitled' }}</ion-label>
+              <a><img ng-src='{{ vm.getImageSrc(image.id) }}' id='{{ image.id }}' width='200' height='200'></a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <span ng-show='generation.length > 0'>
+        <i class='ion-arrow-down-c padding-left'></i>
+        <br>
+      </span>
+    </div>
+
+    <div>
+      <b>THIS SPOT</b>
+      <div class='nest-block' class='nest-block'>
+        <div ng-repeat='spot in [vm.thisSpotWithThinSection]'>
+          <strabo-spot-directive></strabo-spot-directive>
+          <div ng-repeat='image in vm.getImages(spot) track by image.id' ng-click='vm.toggleImageSelected(image)'>
+            <ion-label class='micrograph-nest-image-label'>{{ image.title || 'Untitled' }}</ion-label>
+            <a><img ng-src='{{ vm.getImageSrc(image.id) }}' id='{{ image.id }}' width='200' height='200'></a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div ng-repeat='generation in vm.childGenerations track by $index'>
+      <span ng-show='generation.length > 0'>
+        <i class='ion-arrow-down-c padding-left'></i>
+        <br>
+      </span>
+
+      <div>
+        <span ng-if='$index === 0'>1st</span>
+        <span ng-if='$index === 1'>2nd</span>
+        <span ng-if='$index === 2'>3rd</span>
+        <span ng-if='$index === 3'>4th</span>
+        <span ng-if='$index === 4'>5th</span>
+        <span>Generation Children</span>
+        <div class='nest-block'>
+          <div ng-repeat='spot in generation'>
+            <strabo-spot-directive></strabo-spot-directive>
+            <div ng-repeat='image in vm.getImages(spot) track by image.id' ng-click='vm.toggleImageSelected(image)'>
+              <ion-label class='micrograph-nest-image-label'>{{ image.title || 'Untitled' }}</ion-label>
+              <a><img ng-src='{{ vm.getImageSrc(image.id) }}' id='{{ image.id }}' width='200' height='200'></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class='padding' ng-hide='vm.images.length > 0'>
+      No images in this Spot, {{ vm.thisSpotWithThinSection.properties.name }}.
+      Add images to this Spot from the Spot page for this Micrograph. See below.
+      <button ng-click='vm.goToSpot(vm.thisSpotWithThinSection.properties.id, "images")'
+              class='button'>
+        {{vm.thisSpotWithThinSection.properties.name}}
+      </button>
+    </div>
+  </div>
+  <div id='maps' class="thin-section-maps" data-tap-disabled='true' ng-show='vm.imagesSelected.length > 0'>
+  </div>
+  <div class="thin-section-maps padding" ng-hide='vm.imagesSelected.length > 0'>
+    No images selected. Please select an image on the left to add it to the map workspace.
+  </div>
+</div>
diff --git a/www/app/maps/thin-section/thin-section.directive.js b/www/app/maps/thin-section/thin-section.directive.js
@@ -0,0 +1,15 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app')
+    .directive('straboMicrographDirective', straboMicrographDirective);
+
+  function straboMicrographDirective() {
+    return {
+      'restrict': 'AE',
+      'replace': true,
+      'templateUrl': 'app/maps/thin-section/thin-section.directive.html'
+    };
+  }
+}());
diff --git a/www/app/maps/thin-section/thin-section.html b/www/app/maps/thin-section/thin-section.html
@@ -8,27 +8,7 @@
   </ion-nav-buttons>
   <ion-pane data-tap-disabled='true' scroll="false">
     <ion-content class='has-header'>
-      <div class="side-images-scroll">
-        <ion-list ng-show='vm.images.length > 0'>
-          <ion-item ng-repeat='image in vm.images | orderBy:"name" track by image.id'
-                    ng-click='vm.toggleImageSelected(image)'>
-            <ion-label>{{ image.title || 'Untitled' }}</ion-label>
-            <a><img ng-src='{{ vm.getImageSrc(image.id) }}' id='{{ image.id }}' width='200' height='200'></a>
-          </ion-item>
-        </ion-list>
-        <div class='padding' ng-hide='vm.images.length > 0'>
-          No images in this Spot, {{ vm.thisSpotWithThinSection.properties.name }}.
-          Add images to this Spot from the Spot page for this Thin Section. See below.
-          <button ng-click='vm.goToSpot(vm.thisSpotWithThinSection.properties.id, "images")'
-                  class='button'>
-            {{vm.thisSpotWithThinSection.properties.name}}</button>
-        </div>
-      </div>
-      <div id='maps' class="thin-section-maps" ng-show='vm.imagesSelected.length > 0'>
-      </div>
-      <div class="thin-section-maps padding" ng-hide='vm.imagesSelected.length > 0'>
-        No images selected. Please select an image on the left to add it to the map workspace.
-      </div>
+      <strabo-micrograph-directive></strabo-micrograph-directive>
     </ion-content>
   </ion-pane>
 </ion-view>
diff --git a/www/app/maps/thin-section/thin-section.web.html b/www/app/maps/thin-section/thin-section.web.html
@@ -1,25 +1,5 @@
 <div>
-  <div class="side-images-scroll">
-    <ion-list ng-show='vm.images.length > 0'>
-      <ion-item ng-repeat='image in vm.images | orderBy:"name" track by image.id'
-                ng-click='vm.toggleImageSelected(image)'>
-        <ion-label>{{ image.title || 'Untitled' }}</ion-label>
-        <a><img ng-src='{{ vm.getImageSrc(image.id) }}' id='{{ image.id }}' width='200' height='200'></a>
-      </ion-item>
-    </ion-list>
-    <div class='padding' ng-hide='vm.images.length > 0'>
-      No images in this Spot, {{ vm.thisSpotWithThinSection.properties.name }}.
-      Add images to this Spot from the Spot page for this Micrograph. See below.
-      <button ng-click='vm.goToSpot(vm.thisSpotWithThinSection.properties.id, "images")'
-              class='button'>
-        {{vm.thisSpotWithThinSection.properties.name}}</button>
-    </div>
-  </div>
-  <div id='maps' class="thin-section-maps" data-tap-disabled='true' ng-show='vm.imagesSelected.length > 0'>
-  </div>
-  <div class="thin-section-maps padding"  ng-hide='vm.imagesSelected.length > 0'>
-    No images selected. Please select an image on the left to add it to the map workspace.
-  </div>
+  <strabo-micrograph-directive></strabo-micrograph-directive>
 
   <!-- Side Slide Content -->
   <div>

diff --git a/www/css/style.css b/www/css/style.css
@@ -1067,12 +1067,16 @@ Thin Section
   border-width: 2px;
 }
 
-.thin-section-layout-row{
+.thin-section-layout-row {
   margin-right: 0;
   margin-left: 0;
   margin-bottom: 15px;
 }
 
+.micrograph-nest-image-label {
+  width: 100%;
+}
+
 /*--------------------
 Nesting
 ---------------------*/

diff --git a/www/index.html b/www/index.html
@@ -149,6 +149,7 @@
     <script src="app/maps/image-basemaps/image-basemaps.directive.js"></script>
     <script src="app/maps/strat-section/spots-this-map.directive.js"></script>
     <script src="app/maps/strat-sections/strat-sections.directive.js"></script>
+    <script src="app/maps/thin-section/thin-section.directive.js"></script>
     <script src="app/maps/thin-sections/thin-sections.directive.js"></script>
     <script src="app/maps/other-maps/other-maps.directive.js"></script>
     <script src="app/misc/misc.directive.js"></script>

diff --git a/www/indexWeb.html b/www/indexWeb.html
@@ -167,6 +167,7 @@
     <script src="app/maps/image-basemaps/image-basemaps.directive.js"></script>
     <script src="app/maps/strat-section/spots-this-map.directive.js"></script>
     <script src="app/maps/strat-sections/strat-sections.directive.js"></script>
+    <script src="app/maps/thin-section/thin-section.directive.js"></script>
     <script src="app/maps/thin-sections/thin-sections.directive.js"></script>
     <script src="app/maps/other-maps/other-maps.directive.js"></script>
     <script src="app/misc/misc.directive.js"></script>