Mercurial > gemma
changeset 3597:d1bbfb9635ca
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>