Mercurial > gemma

changeset 3597:d1bbfb9635ca

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: configuration: unified styles of different config components
author Markus Kottlaender <markus@intevation.de>
date Tue, 04 Jun 2019 16:54:45 +0200
parents eeeb7bf14217
children 2be2880ad654
files client/src/components/systemconfiguration/ColorSettings.vue client/src/components/systemconfiguration/DataAccuracy.vue client/src/components/systemconfiguration/PDFTemplates.vue client/src/components/systemconfiguration/Systemconfiguration.vue
diffstat 4 files changed, 348 insertions(+), 330 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue	Tue Jun 04 16:50:17 2019 +0200
+++ b/client/src/components/systemconfiguration/ColorSettings.vue	Tue Jun 04 16:54:45 2019 +0200
@@ -1,42 +1,51 @@
 <template>
-  <div class="d-flex flex-column mt-4">
-    <div class="d-flex flex-row justify-content-between">
-      <h5><translate>Color Settings</translate></h5>
-    </div>
-    <div class="mt-1">
-      <div class="d-flex">
-        <div>
-          <h6 class="card-title">
-            <translate>Bottleneck Areas fill-color</translate>
-          </h6>
-          <chrome-picker v-model="fillColor" />
+  <div class="d-flex flex-column pb-4 border-bottom">
+    <h5 class="py-2 px-3 mb-2 m-0"><translate>Color Settings</translate></h5>
+    <div class="px-3 container-fluid">
+      <div class="row">
+        <div class="col-sm-2">
+          <div class="card">
+            <div class="card-header">
+              <translate>Bottleneck Fill Color</translate>
+            </div>
+            <div class="card-body p-0">
+              <chrome-picker v-model="fillColor" />
+            </div>
+          </div>
         </div>
-        <div class="ml-4">
-          <h6 class="card-title">
-            <translate>Bottleneck Areas stroke-color</translate>
-          </h6>
-          <chrome-picker v-model="strokeColor" />
+        <div class="col-sm-2">
+          <div class="card">
+            <div class="card-header">
+              <translate>Bottleneck Border Color</translate>
+            </div>
+            <div class="card-body p-0">
+              <chrome-picker v-model="strokeColor" />
+            </div>
+          </div>
         </div>
       </div>
-      <div class="mt-4">
-        <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
-          <translate>Send</translate>
-        </a>
-      </div>
+    </div>
+    <div class="mt-4 px-3">
+      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
+        <translate>Send</translate>
+      </a>
     </div>
   </div>
 </template>
 
 <style lang="sass" scoped>
-.vc-chrome
-  box-shadow: none
-  border-radius: 0.25rem
-  overflow: hidden
-  /deep/
-    .vc-chrome-body
-      border: solid 1px #dee2e6
-      border-bottom-left-radius: 0.25rem
-      border-bottom-right-radius: 0.25rem
+/deep/
+  .card
+    overflow: hidden
+    .card-header
+      padding: .25rem 1rem
+    .vc-chrome
+      box-shadow: none
+      border-radius: 0
+      width: 100%
+      .vc-chrome-saturation-wrap
+        border-radius: 0
+        padding-bottom: 45%
 </style>
 
 <script>
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 16:50:17 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Tue Jun 04 16:54:45 2019 +0200
@@ -1,246 +1,262 @@
 <template>
-  <div class="d-flex flex-column mt-4 pt-4 border-top">
-    <div class="d-flex flex-row justify-content-between">
-      <h5><translate>Data Availability/Accuracy</translate></h5>
-    </div>
-    <div class="mt-1">
-      <h6 class="font-weight-bold">
-        <translate>Currency of Bottleneck Surveys</translate>
-      </h6>
-
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            Last survey within revisiting time.
-          </div>
-        </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Last survey within revisiting time</div>
-            <div>
-              x
-              <input
-                type="number"
-                step="0.1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="bn_revtime_multiplier"
-              />
+  <div class="d-flex flex-column pb-4">
+    <h5 class="py-2 px-3 mb-2 m-0">
+      <translate>Data Availability/Accuracy</translate>
+    </h5>
+    <div class="px-3 container-fluid">
+      <div class="row">
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Currency of Bottleneck Surveys</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                Last survey within revisiting time.
+              </div>
+            </div>
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Last survey within revisiting time</div>
+                <div>
+                  x
+                  <input
+                    type="number"
+                    step="0.1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="bn_revtime_multiplier"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Last survey older than revisiting time x
+                  <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Last survey older than revisiting time x
-              <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Availability of Gauge Measurements</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Latest measurement not older than
+                  <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours
+                  and at least
+                  <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
+                  measurements in the last 14 days
+                </div>
+              </div>
+            </div>
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Minimum number of measurements in the last 14 days:</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 90px"
+                    v-model="gm_min_values_14d"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Latest measurement older than</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_latest_hours"
+                  />
+                  hours
+                </div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-
-      <h6 class="mt-4 font-weight-bold">
-        <translate>Availability of Gauge Measurements</translate>
-      </h6>
-
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Latest measurement not older than
-              <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at
-              least
-              <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
-              measurements in the last 14 days
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Gauge Forecast Confidence</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Confidence offset within last 24 hours less than
+                  <b
+                    >{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b
+                  >
+                  and within last 72 hours less than
+                  <b
+                    >{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Confidence offset within last 24 hours greater than:</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_offset_24h"
+                  />
+                  cm
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>Confidence offset within last 72 hours greater than:</div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    min="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_offset_72h"
+                  />
+                  cm
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Minimum number of measurements in the last 14 days:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 90px"
-                v-model="gm_min_values_14d"
-              />
+        <div class="col-sm-6">
+          <h6 class="font-weight-bold">
+            <translate>Gauge Forecast vs. Reality</translate>
+          </h6>
+          <div class="d-flex text-center small">
+            <div class="card rounded-left">
+              <div class="card-header text-white bg-success">OK</div>
+              <div
+                class="card-body d-flex align-items-center justify-content-center"
+              >
+                <div>
+                  Nash-Sutcliffe-Coefficient for last 24 hours greater than
+                  <b>{{
+                    Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
+                  }}</b>
+                  and for last 72 hours greater than
+                  <b
+                    >{{
+                      Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
+                    }}
+                    cm</b
+                  >
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Latest measurement older than</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_latest_hours"
-              />
-              hours
+            <div class="card border-left-0 border-right-0 rounded-0">
+              <div class="card-header text-white bg-warning rounded-0">
+                Warning
+              </div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>
+                  Nash-Sutcliffe-Coefficient for last 24 hours less than:
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_vs_reality_nsc_24h"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="card rounded-right">
+              <div class="card-header text-white bg-danger">Critical</div>
+              <div
+                class="card-body d-flex flex-column align-items-center justify-content-center"
+              >
+                <div>
+                  Nash-Sutcliffe-Coefficient for last 72 hours less than:
+                </div>
+                <div>
+                  <input
+                    type="number"
+                    step="1"
+                    class="form-control form-control-sm d-inline"
+                    style="width: 70px"
+                    v-model="gm_forecast_vs_reality_nsc_72h"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-
-      <h6 class="mt-4 font-weight-bold">
-        <translate>Gauge Forecast Confidence</translate>
-      </h6>
-
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Confidence offset within last 24 hours less than
-              <b>{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b>
-              and within last 72 hours less than
-              <b>{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b>
-            </div>
-          </div>
-        </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Confidence offset within last 24 hours greater than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_offset_24h"
-              />
-              cm
-            </div>
-          </div>
-        </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Confidence offset within last 72 hours greater than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                min="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_offset_72h"
-              />
-              cm
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <h6 class="mt-4 font-weight-bold">
-        <translate>Gauge Forecast vs. Reality</translate>
-      </h6>
+    </div>
 
-      <div class="d-flex text-center">
-        <div class="card rounded-left">
-          <div class="card-header text-white bg-success">OK</div>
-          <div
-            class="card-body d-flex align-items-center justify-content-center"
-          >
-            <div>
-              Nash-Sutcliffe-Coefficient for last 24 hours greater than
-              <b>{{
-                Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
-              }}</b>
-              and for last 72 hours greater than
-              <b
-                >{{
-                  Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
-                }}
-                cm</b
-              >
-            </div>
-          </div>
-        </div>
-        <div class="card border-left-0 border-right-0 rounded-0">
-          <div class="card-header text-white bg-warning rounded-0">Warning</div>
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Nash-Sutcliffe-Coefficient for last 24 hours less than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_vs_reality_nsc_24h"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="card rounded-right">
-          <div class="card-header text-white bg-danger">Critical</div>
-
-          <div
-            class="card-body d-flex flex-column align-items-center justify-content-center"
-          >
-            <div>Nash-Sutcliffe-Coefficient for last 72 hours less than:</div>
-            <div>
-              <input
-                type="number"
-                step="1"
-                class="form-control form-control-sm d-inline"
-                style="width: 70px"
-                v-model="gm_forecast_vs_reality_nsc_72h"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-4">
-        <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
-          <translate>Send</translate>
-        </a>
-      </div>
+    <div class="mt-4">
+      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
+        <translate>Send</translate>
+      </a>
     </div>
   </div>
 </template>
 
 <style lang="sass" scoped>
 .card
-  width: 33%
+  width: 33.333%
 .rounded-left,
 .rounded-left .card-header
   border-top-right-radius: 0
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Tue Jun 04 16:50:17 2019 +0200
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Tue Jun 04 16:54:45 2019 +0200
@@ -1,82 +1,75 @@
 <template>
-  <div class="d-flex flex-column">
-    <div class="d-flex flex-row justify-content-between">
-      <h5><translate>PDF-Templates</translate></h5>
-      <input
-        @change="uploadTemplate"
-        id="uploadTemplate"
-        ref="uploadTemplate"
-        type="file"
-        style="visibility:hidden"
-      />
-    </div>
-    <div class="mt-1 border-bottom pb-4">
-      <UITableHeader
-        :columns="[
-          { id: 'name', title: `${nameLabel}`, class: 'col-3' },
-          { id: 'time', title: `${dateLabel}`, class: 'col-3' },
-          { id: 'type', title: `${typeLabel}`, class: 'col-2' },
-          { id: 'country', title: `${countryLabel}`, class: 'col-2' }
-        ]"
-      />
-      <UITableBody :data="templates | sortTable(sortColumn, sortDirection)">
-        <template v-slot:row="{ item: template }">
-          <div class="py-1 col-3">{{ template.name }}</div>
-          <div class="py-1 col-3">{{ template.time }}</div>
-          <div class="py-1 col-2">{{ template.type }}</div>
-          <div class="py-1 col-2" v-if="template.country">
-            {{ template.country }}
-          </div>
-          <div class="py-1 col-2" v-else><i>global</i></div>
-          <div class="col py-1 text-right">
-            <button
-              class="btn btn-xs btn-info mr-1"
-              ref="downloadTemplate"
-              @click="downloadTemplate(template)"
-            >
-              <font-awesome-icon icon="download" fixed-width />
-            </button>
-            <button
-              class="btn btn-xs btn-dark"
-              @click="deleteTemplate(template)"
-            >
-              <font-awesome-icon icon="trash" fixed-width />
-            </button>
-          </div>
-        </template>
-      </UITableBody>
-      <div class="mt-2">
-        <button
-          class="btn btn-info btn-sm mr-2"
-          @click="
-            type = 'map';
-            $refs.uploadTemplate.click();
-          "
-        >
-          <font-awesome-icon
-            icon="spinner"
-            class="fa-spin fa-fw"
-            v-if="uploading"
-          />
-          <font-awesome-icon icon="upload" class="fa-fw" v-else />
-          <translate>Upload new map template</translate>
-        </button>
-        <button
-          class="btn btn-info btn-sm"
-          @click="
-            type = 'diagram';
-            $refs.uploadTemplate.click();
-          "
-        >
-          <font-awesome-icon
-            icon="spinner"
-            class="fa-spin fa-fw"
-            v-if="uploading"
-          />
-          <font-awesome-icon icon="upload" class="fa-fw" v-else />
-          <translate>Upload new diagram template</translate>
-        </button>
-      </div>
+  <div class="d-flex flex-column pb-4 border-bottom">
+    <h5 class="py-2 px-3 m-0"><translate>PDF-Templates</translate></h5>
+    <input
+      @change="uploadTemplate"
+      id="uploadTemplate"
+      ref="uploadTemplate"
+      type="file"
+      style="visibility: hidden; position: absolute;"
+    />
+    <UITableHeader
+      :columns="[
+        { id: 'name', title: `${nameLabel}`, class: 'col-3' },
+        { id: 'time', title: `${dateLabel}`, class: 'col-3' },
+        { id: 'type', title: `${typeLabel}`, class: 'col-2' },
+        { id: 'country', title: `${countryLabel}`, class: 'col-2' }
+      ]"
+    />
+    <UITableBody :data="templates | sortTable(sortColumn, sortDirection)">
+      <template v-slot:row="{ item: template }">
+        <div class="py-1 col-3">{{ template.name }}</div>
+        <div class="py-1 col-3">{{ template.time }}</div>
+        <div class="py-1 col-2">{{ template.type }}</div>
+        <div class="py-1 col-2" v-if="template.country">
+          {{ template.country }}
+        </div>
+        <div class="py-1 col-2" v-else><i>global</i></div>
+        <div class="col py-1 text-right">
+          <button
+            class="btn btn-xs btn-info mr-1"
+            ref="downloadTemplate"
+            @click="downloadTemplate(template)"
+          >
+            <font-awesome-icon icon="download" fixed-width />
+          </button>
+          <button class="btn btn-xs btn-dark" @click="deleteTemplate(template)">
+            <font-awesome-icon icon="trash" fixed-width />
+          </button>
+        </div>
+      </template>
+    </UITableBody>
+    <div class="px-2 mt-2">
+      <button
+        class="btn btn-info btn-sm mr-2"
+        @click="
+          type = 'map';
+          $refs.uploadTemplate.click();
+        "
+      >
+        <font-awesome-icon
+          icon="spinner"
+          class="fa-spin fa-fw"
+          v-if="uploading"
+        />
+        <font-awesome-icon icon="upload" class="fa-fw" v-else />
+        <translate>Upload new map template</translate>
+      </button>
+      <button
+        class="btn btn-info btn-sm"
+        @click="
+          type = 'diagram';
+          $refs.uploadTemplate.click();
+        "
+      >
+        <font-awesome-icon
+          icon="spinner"
+          class="fa-spin fa-fw"
+          v-if="uploading"
+        />
+        <font-awesome-icon icon="upload" class="fa-fw" v-else />
+        <translate>Upload new diagram template</translate>
+      </button>
     </div>
   </div>
 </template>
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue	Tue Jun 04 16:50:17 2019 +0200
+++ b/client/src/components/systemconfiguration/Systemconfiguration.vue	Tue Jun 04 16:54:45 2019 +0200
@@ -3,7 +3,7 @@
     <Spacer />
     <div class="card my-2 mr-2 flex-fill shadow-xs">
       <UIBoxHeader icon="wrench" :title="systemconfigurationLabel" />
-      <div class="card-body text-left flex-fill" style="overflow: auto">
+      <div class="text-left flex-fill" style="overflow: auto">
         <PDFTemplates />
         <ColorSettings v-if="isSysAdmin" />
       </div>