소스 검색

Add fucking big spinner

jmacura 5 년 전
부모
커밋
0776430600
7개의 변경된 파일76개의 추가작업 그리고 4개의 파일을 삭제
  1. 23 0
      src/adjuster/adjuster-loader.component.js
  2. 6 0
      src/adjuster/adjuster-loader.directive.html
  3. 6 1
      src/adjuster/adjuster.module.js
  4. 8 0
      src/app.component.js
  5. 32 1
      src/app.css
  6. 0 1
      src/app.module.js
  7. 1 1
      src/index.html

+ 23 - 0
src/adjuster/adjuster-loader.component.js

@@ -0,0 +1,23 @@
+//Currently unused and replaced by a simple directive
+export const AdjusterLoaderComponent = {
+  template: require('./adjuster-loader.directive.html'),
+  bindings: {},
+  controller: function (
+    $scope,
+    HsCore,
+    HsConfig,
+    PraAdjusterService,
+    HsUtilsService
+  ) {
+    'ngInject';
+    const vm = this;
+
+    angular.extend(vm, {
+      //HsCore,
+      PraAdjusterService,
+    });
+
+    //$scope.$emit('scope_loaded', 'adjuster');
+  },
+  controllerAs: 'vm',
+};

+ 6 - 0
src/adjuster/adjuster-loader.directive.html

@@ -0,0 +1,6 @@
+<div class="center-block">
+  <h1>Calculating clusters</h1>
+  <div class="spinner-border spinner" role="status">
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>

+ 6 - 1
src/adjuster/adjuster.module.js

@@ -9,4 +9,9 @@ angular
     };
   })
   .service('PraAdjusterService', AdjusterService)
-  .component('pra.adjuster', AdjusterComponent);
+  .component('pra.adjuster', AdjusterComponent)
+  .directive('praAdjusterLoader', () => {
+    return {
+      template: require('./adjuster-loader.directive.html'),
+    };
+  });

+ 8 - 0
src/app.component.js

@@ -22,6 +22,7 @@ export const HsComponent = {
     const vm = this;
     vm.exists = HsCore.exists;
     vm.panelVisible = HsLayoutService.panelVisible;
+    vm.PraAdjusterService = PraAdjusterService;
     HsLayoutService.sidebarRight = false;
     // HsLayoutService.sidebarToggleable = false;
     // HsCore.singleDatasources = true;
@@ -39,6 +40,13 @@ export const HsComponent = {
         )[0];
         HsLayoutService.sidebarListElement.appendChild(toolbarButton);
         $compile(toolbarButton)(event.targetScope);
+        const loader = angular.element(
+          '<pra-adjuster-loader class="loader-splash" ng-if="vm.PraAdjusterService.isClusteringInProcess()"></pra-adjuster-loader>'
+        )[0];
+        HsLayoutService.contentWrapper
+          .querySelector('.hs-page-content')
+          .appendChild(loader);
+        $compile(loader)(event.targetScope);
       }
     });
     $scope.$on('clusters_loaded', function (event, args) {

+ 32 - 1
src/app.css

@@ -1,8 +1,39 @@
 #hs-app {
+  display: block;
   height: 100vh;
   position: relative;
 }
 
-cursor-pointer {
+.cursor-pointer {
   cursor: pointer;
 }
+
+.loader-splash {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1010;
+  top: 0;
+  left: 0;
+  background-color: rgba(65,65,65,.66);
+}
+
+.loader-splash > div {
+  position: relative;
+  margin-top: 20%;
+}
+
+.loader-splash h1 {
+  color: #77bbff;
+}
+
+.loader-splash .spinner {
+  width: 10vh;
+  height: 10vh;
+  color: #77bbff;
+}
+
+.center-block {
+  text-align: center;
+  margin-bottom: 1em;
+}

+ 0 - 1
src/app.module.js

@@ -82,7 +82,6 @@ angular
     // allowAddExternalDatasets: false,
     panelsEnabled: {
       composition_browser: false,
-      //info: false,
       saveMap: false,
       language: false,
     },

+ 1 - 1
src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title>Rural attractiveness</title>
+  <title>Rural attractiveness clusters</title>
   <meta name="description"
     content="Rural attractiveness calculation and visualization application developed in PoliRural project. 2020">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">