Fix 0.3.1 (#67)

* set version nr * 64 oppervlakte bugs (#66) * merge oppervlakte fields partial double functionality, too complex * style bodemingreep field and fix warning OnroerendErfgoed/notas#630 * add html validation & css to bodemingreep input possible fix for validation errors in OnroerendErfgoed/notas#814 * reorder & restyle locatiepercelen * style the percelengrid * merge 2 identical conditionals * simplify code * update travis * attempt to fix travis * tweak input style * tweak setdata & reset logic
OnroerendErfgoed · Nov 8, 2018 · 6b68acb · 6b68acb
1 parent 7cfe447
commit 6b68acb
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 85 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,29 +1,27 @@
 dist: trusty
 language: node_js
 node_js:
-  - '0.10'
+  - 'lts/*'
 sudo: required
 notifications:
   email:
-    - aaron.steurbaut@geosolutions.be
-    - maarten.taeymans@geosolutions.be
-    - cedrik.vanderhaegen@geosolutions.be
+    - cedrik.vanderhaegen@vlaanderen.be
 addons:
-  apt:
-    packages:
-      - chromium-browser
-      - chromium-chromedriver
+  chrome: stable
 
 install:
   - npm install
 
 before_script:
   - grunt -v jshint
   - export TZ=Europe/Brussels
+before_install:
+  - nvm install 8.12.0
+  - nvm use 8.12.0
+  - export CHROME_BIN=chromium-browser
   - "export DISPLAY=:99.0"
-  - "export CHROME_BIN=chromium-browser"
   - "sh -e /etc/init.d/xvfb start"
-
+  - sleep 3 # give xvfb some time to start
 
 # Send coverage data to Coveralls
 after_script: "cat ./lcov.info | ./node_modules/coveralls/bin/coveralls.js"
diff --git a/LocatiePercelen.js b/LocatiePercelen.js
@@ -7,6 +7,7 @@ define([
   'dijit/_TemplatedMixin',
   'dojo/text!./templates/LocatiePercelen.html',
   'dojo/dom-construct',
+  'dojo/dom-class',
   'dojo/query',
   'dojo/on',
   'dojo/topic',
@@ -27,6 +28,7 @@ define([
   TemplatedMixin,
   template,
   domConstruct,
+  domClass,
   query,
   on,
   topic,
@@ -49,7 +51,6 @@ define([
     disabled: true,
     afdelingenStore: null,
     showOppervlakte: false,
-    bodemIngreep: false,
     openbaarDomein: false,
     _perceelGrid: null,
     _perceelStore: null,
@@ -72,19 +73,12 @@ define([
 
 
       if (!this.showOppervlakte) {
-        this.oppervlakteNode.style.display = 'none';
-      }
-
-      if (!this.bodemIngreep) {
-        this.bodemingreepNode.style.display = 'none';
+        domClass.add(this.oppervlakteNode, 'hide');
+        this._perceelGrid.styleColumn('oppervlakte', 'display: none;');
       }
 
       if (!this.openbaarDomein) {
-        this.openbaardomeinNode.style.display = 'none';
-      }
-
-      if (!this.showOppervlakte && !this.bodemIngreep) {
-        this._perceelGrid.styleColumn('oppervlakte', 'display: none;');
+        domClass.add(this.openbaardomeinNode, 'hide');
       }
 
       this._refAdresDialog = new RefAdresDialog({
@@ -162,9 +156,7 @@ define([
       query(this.totaleOppBodemingreep).attr({disabled: false});
       // query('.placeholder-container:not(.placeholder-always-disabled) input#dichtstbijzijndeAdres-' + this.id,
       //   this.locatieContent).attr({disabled: true});
-
-      this.refreshPercelenNode.style.display = 'inline-block';
-
+      domClass.remove(this.refreshPercelenNode, 'hide');
       this._perceelGrid.styleColumn('remove', 'display: table-cell');
     },
 
@@ -176,7 +168,7 @@ define([
         '.placeholder-container:not(.placeholder-always-disabled) select', this.locatieContent)
         .attr({disabled: true});
       query(this.totaleOppBodemingreep).attr({disabled: true});
-      this.refreshPercelenNode.style.display = 'none';
+      domClass.add(this.refreshPercelenNode, 'hide');
       query('a.fa-pencil', this.locatieContent).addClass('hide');
 
       this._perceelGrid.styleColumn('remove', 'display: none;');
@@ -214,8 +206,7 @@ define([
     },
 
     updatePercelen: function () {
-      this.locatieContent.style.display = 'none';
-      this.locatieLoading.style.display = 'block';
+      this._showLoading();
       this.locatieService.getKadastralePercelenInZone(this._currentZone).then(
         lang.hitch(this, function (result) {
           array.map(result, function (locatieElementPerceel) {
@@ -233,23 +224,14 @@ define([
           },this);
           this._perceelGrid.set('collection', this._perceelStore);
 
-          this.locatieLoading.style.display = 'none';
-          this.locatieContent.style.display = 'block';
-
           if (this.showOppervlakte) {
             this._updatePerceelOppervlakte();
           }
 
-         /* if (this.bodemIngreep) {
-            this._updateBodemOppervlakte();
-          }*/
-
           if (!this._warningDisplayed) {
             this._showPercelenWarning();
           }
           this.emit('percelen.changed', {percelen: this.getData()});
-
-          this._perceelGrid.resize();
         }),
         lang.hitch(this, function (error) {
           console.error(error);
@@ -260,8 +242,11 @@ define([
           });
           this._perceelStore = new TrackableMemoryStore({ data: [], idProperty: 'capakey' });
           this._perceelGrid.set('collection', this._perceelStore);
-          this.locatieLoading.style.display = 'none';
-          this.locatieContent.style.display = 'block';
+        })
+      ).always(
+        lang.hitch(this, function () {
+          this._hideLoading();
+          this._perceelGrid.resize();
         })
       );
     },
@@ -276,7 +261,7 @@ define([
       });
     },
 
-    setData: function(locatie, opp) {
+    setData: function(locatie) {
       console.debug('LocatiePercelen::setData', locatie);
       this.locatie = locatie;
 
@@ -324,19 +309,15 @@ define([
       // update oppervlakte
       if (this.showOppervlakte) {
         this._updatePerceelOppervlakte();
+        /* jshint -W106 */
+        if (locatie.oppervlakte_bodemingreep) {
+          this.updateBodemOppervlakte(locatie.oppervlakte_bodemingreep);
+        }
+        /* jshint +W106 */
       }
 
-      if (opp) {
-        this.updateBodemOppervlakte(opp);
-      }
-
-     /* if (this.bodemIngreep) {
-        this._updateBodemOppervlakte();
-      }*/
-
       //hide loading div
-      this.locatieLoading.style.display = 'none';
-      this.locatieContent.style.display = 'block';
+      this._hideLoading();
     },
 
     getData: function() {
@@ -364,7 +345,7 @@ define([
         var clonePerceel = lang.clone(perceel);
         delete clonePerceel.capakey; //remove the extra grid ids again
         // remove oppervlakte when not asked for
-        if ((!this.showOppervlakte && !this.bodemIngreep) && clonePerceel.perceel && clonePerceel.perceel.oppervlakte) {
+        if ((!this.showOppervlakte) && clonePerceel.perceel && clonePerceel.perceel.oppervlakte) {
           delete clonePerceel.perceel.oppervlakte;
         }
         elementen.push(clonePerceel);
@@ -374,23 +355,33 @@ define([
     },
 
     getBodemOppervlakte: function() {
-      return parseFloat(this.totaleOppBodemingreep.value).toFixed(2);
+      var val = this.totaleOppBodemingreep.value;
+      return val && val > 0 ? parseFloat(val).toFixed(2) : 0;
     },
 
     updateZoneOppervlakte: function(opp) {
-      if (opp !== null) {
+      console.debug('LocatiePercelen::updateZoneOppervlakte', opp);
+      if (opp !== null && opp > 0) {
         this.totaleOppZone.innerHTML = parseFloat(opp).toFixed(2);
-        this.totaleOppGebied.innerHTML = parseFloat(opp).toFixed(2);
       }
     },
 
     updateBodemOppervlakte: function(opp) {
-      if (opp !== null) {
+      console.debug('LocatiePercelen::updateBodemOppervlakte', opp);
+      if (opp !== null && opp > 0) {
         this._bodemIngreepOpp = opp;
         this.totaleOppBodemingreep.value = parseFloat(opp).toFixed(2);
       }
     },
 
+    resetBodemOppervlakte: function() {
+      console.debug('LocatiePercelen::resetBodemOppervlakte');
+      if (this._bodemIngreepOpp) {
+        this.totaleOppBodemingreep.value = parseFloat(this._bodemIngreepOpp).toFixed(2);
+      }
+    },
+
+
     _updatePerceelOppervlakte: function() {
       console.debug('LocatiePercelen::_updatePerceelOppervlakte');
       var opp = 0;
@@ -437,11 +428,11 @@ define([
             opp += parseFloat(perc.oppervlakte);
             this._perceelStore.put(perc.perceel);
           }, this);
-          this.totaleOppGebied.innerHTML = parseFloat(opp).toFixed(2);
+          // this.totaleOppGebied.innerHTML = parseFloat(opp).toFixed(2);
         }),
         lang.hitch(this, function (error) {
           console.error('LocatiePercelen::_updatePerceelOppervlakte::all', error);
-          this.totaleOppGebied.innerHTML = 'Er is een fout opgetreden!';
+          // this.totaleOppGebied.innerHTML = 'Er is een fout opgetreden!';
         })
       );
     },*/
@@ -450,15 +441,14 @@ define([
       this.clear();
 
       if (this.locatie) {
-        this.setData(this.locatie, this._bodemIngreepOpp);
+        this.setData(this.locatie);
       }
 
       this.emit('percelen.changed', {percelen: this.getData()});
     },
 
     clear: function() {
-      this.locatieLoading.style.display = 'none';
-      this.locatieContent.style.display = 'block';
+      this._hideLoading();
 
       this._perceelStore = new TrackableMemoryStore({ data: [], idProperty: 'capakey' });
       this._perceelGrid.set('collection', this._perceelStore);
@@ -470,9 +460,6 @@ define([
       if (this.showOppervlakte) {
         this.totaleOppZone.innerHTML = '-';
         this.totaleOppPercelen.innerHTML = '-';
-      }
-      if (this.bodemIngreep) {
-        this.totaleOppGebied.innerHTML = '-';
         this.totaleOppBodemingreep.value = '';
       }
       if (this.openbaarDomein) {
@@ -635,15 +622,11 @@ define([
 
     _compareAddresses: function(adres, compare) {
       if (adres && compare) {
-        if ((adres.land === compare.land) &&
+        return ((adres.land === compare.land) &&
           (adres.gemeente === compare.gemeente) &&
           (adres.postcode === compare.postcode) &&
           (adres.straat === compare.straat) &&
-          (adres.huisnummer === compare.huisnummer)) {
-          return true;
-        } else {
-          return false;
-        }
+          (adres.huisnummer === compare.huisnummer));
       } else {
         return true;
       }
@@ -652,6 +635,16 @@ define([
     _openEditRefAdres: function(evt) {
       evt ? evt.preventDefault() : null;
       this._refAdresDialog.show(this._perceelStore.data, this._nearestAddress);
+    },
+
+    _hideLoading: function () {
+      domClass.add(this.locatieLoading, 'hide');
+      domClass.remove(this.locatieContent, 'hide');
+    },
+
+    _showLoading: function () {
+      domClass.remove(this.locatieLoading, 'hide');
+      domClass.add(this.locatieContent, 'hide');
     }
   });
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oe_dojo",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Dojo library for Onroerend Erfgoed UI's",
   "repository": {
     "type": "git",

diff --git a/resources/scss/locatiePercelen.scss b/resources/scss/locatiePercelen.scss
@@ -1,5 +1,6 @@
 // locatie percelen grid
 .dgrid.percelenGrid {
+  width: 100%;
   .dgrid-column-afdeling { width: 150px; }
   .dgrid-column-sectie { width: 50px; }
   .dgrid-column-capakey { width: 150px;}
@@ -17,6 +18,18 @@
 .locatie-percelen {
   height: 100%;
   overflow-y: auto;
+
+  input:invalid {
+    border: 5px solid #ff1217;
+  }
+
+  h4 {
+    margin: 0;
+  }
+
+  hr {
+    margin: 0.5rem 0;
+  }
 }
 
 .refadres-dialog {

diff --git a/templates/LocatiePercelen.html b/templates/LocatiePercelen.html
@@ -1,32 +1,32 @@
 <div class="row">
-  <div class="large-11 columns" style="display: none" data-dojo-attach-point="locatieLoading">
+  <div class="large-11 columns hide" data-dojo-attach-point="locatieLoading">
     <h4><i class="fa fa-spinner fa-pulse"></i>&nbsp;Data wordt opgehaald..</h4>
   </div>
   <div class="large-12 columns" data-dojo-attach-point="locatieContent">
     <h4>
-      <strong>Referentieadres:</strong> <span data-dojo-attach-point="refAdresNode"></span>
-      <a href="#" title="Pas het referentieadres aan" class="fa fa-pencil hide" style="float: right;" data-dojo-attach-event="onClick: _openEditRefAdres"></a>
+      Referentieadres: <small><span style="color: #989898" data-dojo-attach-point="refAdresNode"></span>
+      <a href="#" title="Pas het referentieadres aan" class="fa fa-pencil hide" style="float: right;" data-dojo-attach-event="onClick: _openEditRefAdres"></a></small>
     </h4>
     <hr>
+    <div data-dojo-attach-point="oppervlakteNode">
+      <h4>Oppervlaktes</h4>
+      <ul>
+        <li>Oppervlakte projectgebied: <span data-dojo-attach-point="totaleOppZone">-</span> m²</li>
+        <li>Totale oppervlakte kadastrale percelen: <span data-dojo-attach-point="totaleOppPercelen">-</span> m²</li>
+        <li>Oppervlakte bodemingreep
+          <i class="fa fa-question-circle" title="Voor verkavelingen is geen bodemingreep van toepassing en dient er '0' ingevuld te worden."></i>:
+          <input style="display: inline-block; width: 100px; margin: 0; height: 1.5rem" step="0.01" min="0" placeholder="0.00" type="number" data-dojo-attach-point="totaleOppBodemingreep" value="0" disabled /> m²
+        </li>
+      </ul>
+    </div>
+    <hr>
     <h4 style="display: inline-block">Kadastrale percelen</h4><a style="display: inline-block; float: right; padding-top: 8px;" href="#" data-dojo-attach-event="onClick: _refreshPercelen" data-dojo-attach-point="refreshPercelenNode"><i class="fa fa-refresh"></i>&nbsp;&nbsp;Haal percelen op</a>
     <div data-dojo-attach-point="percelenNode"></div>
-    <hr>
     <div data-dojo-attach-point="openbaardomeinNode">
       <div class="placeholder-container placeholder-disabled placeholder-checkbox">
         <input type="checkbox" id="domeinInput-${id}" data-dojo-attach-point="domeinCheckbox" disabled />
         <label class="placeholder-checkbox-label" for="domeinInput-${id}">Openbaar domein?</label>
       </div>
     </div>
-    <div class="large-12 columns" data-dojo-attach-point="oppervlakteNode">
-      <p style="margin-bottom: 0;">Totale oppervlakte zone: <span data-dojo-attach-point="totaleOppZone">-</span> m²</p>
-      <p>Totale oppervlakte kadastrale percelen: <span data-dojo-attach-point="totaleOppPercelen">-</span> m²</p>
-    </div>
-    <div class="large-12 columns" data-dojo-attach-point="bodemingreepNode">
-      <p style="margin-bottom: 0;">Oppervlakte projectgebied: <span data-dojo-attach-point="totaleOppGebied">-</span> m²</p>
-      <p>Oppervlakte bodemingreep
-        <i class="fa fa-question-circle" title="Voor verkavelingen is geen bodemingreep van toepassing en dient er '0' ingevuld te worden."></i>:
-        <input type="number" data-dojo-attach-point="totaleOppBodemingreep" value="0" disabled /> m²
-      </p>
-    </div>
   </div>
 </div>