Mercurial > gemma
changeset 3606:a8190a570b71
client: configuration: prepared morphology classbreaks UI
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 05 Jun 2019 12:02:23 +0200 |
parents | d02d4e31491b |
children | 2f21aee4e53a |
files | client/src/components/systemconfiguration/DataAccuracy.vue client/src/components/systemconfiguration/MorphologyClassbreaks.vue |
diffstat | 2 files changed, 131 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/DataAccuracy.vue Wed Jun 05 11:48:15 2019 +0200 +++ b/client/src/components/systemconfiguration/DataAccuracy.vue Wed Jun 05 12:02:23 2019 +0200 @@ -1,5 +1,5 @@ <template> - <div class="d-flex flex-column pb-4"> + <div class="d-flex flex-column pb-4 border-bottom"> <h5 class="py-2 px-3 mb-2 m-0"> <translate>Data Availability/Accuracy</translate> </h5>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue Wed Jun 05 12:02:23 2019 +0200 @@ -0,0 +1,130 @@ +<template> + <div class="d-flex flex-column pb-4 border-bottom"> + <h5 class="py-2 px-3 mb-2 m-0"> + <translate>Bottleneck Morphology Classbreaks</translate> + </h5> + <div class="px-3"> + <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6> + <div class="d-flex flex-wrap"> + <div + class="input-group mb-3 mr-2 classbreak" + v-for="(value, i) in classbreaks" + :key="i" + > + <select class="form-control form-control-sm"> + <option><</option> + <option>≤</option> + <option>></option> + <option>≥</option> + </select> + <input + v-model="classbreaks[i]" + type="number" + min="0" + step="0.1" + class="form-control form-control-sm" + /> + <div class="input-group-append"> + <button + class="btn btn-sm btn-danger" + type="button" + @click="classbreaks.splice(i, 1)" + > + <font-awesome-icon icon="trash" /> + </button> + </div> + </div> + <button + class="btn btn-sm btn-success mb-3" + @click="classbreaks.unshift(classbreaks.length ? classbreaks[0] : 1)" + > + <font-awesome-icon icon="plus" /> + </button> + </div> + </div> + <div class="px-3"> + <h6 class="font-weight-bold"> + <translate>Sounding Result Comparison</translate> + </h6> + <div class="d-flex flex-wrap"> + <div + class="input-group mb-3 mr-2 classbreak" + v-for="(value, i) in compareClassbreaks" + :key="i" + > + <select class="form-control form-control-sm"> + <option><</option> + <option>≤</option> + <option>></option> + <option>≥</option> + </select> + <input + v-model="compareClassbreaks[i]" + type="number" + step="0.1" + class="form-control form-control-sm" + /> + <div class="input-group-append"> + <button + class="btn btn-sm btn-danger" + type="button" + @click="classbreaks.splice(i, 1)" + > + <font-awesome-icon icon="trash" /> + </button> + </div> + </div> + <button + class="btn btn-sm btn-success mb-3" + @click=" + compareClassbreaks.unshift( + compareClassbreaks.length ? compareClassbreaks[0] : 1 + ) + " + > + <font-awesome-icon icon="plus" /> + </button> + </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> +.classbreak + width: 130px + input + width: 30px +</style> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Markus Kottländer <markus@intevation.de> + */ + +export default { + data() { + return { + classbreaks: [], + compareClassbreaks: [] + }; + }, + methods: { + submit() {} + } +}; +</script>