Mercurial > gemma
changeset 863:d1863e91b039
client: fix systemconfiguration for stroke colour
* Improve layout so that all three values are shown, even when smaller
and the box does not extend too much, when being in a larger view.
* Changed code to be sure to send integers and a float.
* Add code to set the colours from the server response.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 20:58:38 +0200 |
parents | 0a6cb09ca28c |
children | 2079fabbe6dd |
files | client/src/systemconfiguration/systemconfiguration.vue |
diffstat | 1 files changed, 26 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/systemconfiguration/systemconfiguration.vue Fri Sep 28 18:09:59 2018 +0200 +++ b/client/src/systemconfiguration/systemconfiguration.vue Fri Sep 28 20:58:38 2018 +0200 @@ -1,23 +1,23 @@ <template> <div class="d-flex flex-row"> <div class="card sysconfig"> - <div class="card-header shadow-sm text-white bg-info mb-3"> + <div class="card-header shadow-sm text-white bg-info mb-6"> Systemconfiguration </div> <div class="card-body"> <div class="inputs form-group row"> <div class="col-2"> - <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="r"> + <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255"> </div> <div class="col-2"> - <label for="g"></label>G<input class="form-control form-control-sm" v-model="g" id="g" placeholder="g"> + <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255"> </div> <div class="col-2"> - <label for="b"></label>B<input class="form-control form-control-sm" v-model="b" id="b" placeholder="b"> + <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255"> </div> <div class="col-2"> - <label for="a"></label>A<input class="form-control form-control-sm" v-model="a" id="a" placeholder="a"> + <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0"> </div> </div> <div class="sendbutton"> @@ -40,9 +40,10 @@ } .sysconfig { margin-top: $offset; - margin-left: auto; + margin-left: 30vw; margin-right: auto; - width: 30vw; + width: 60vw; + max-width: 500px; height: 40vh; } </style> @@ -55,31 +56,29 @@ data() { return { sent: false, - r: 224, - g: 215, - b: 216, - a: 90, + r: 124, + g: 115, + b: 116, + a: 0.9, currentConfig: null }; }, methods: { submit() { - const payload = JSON.stringify({ - r: this.r, - g: this.g, - b: this.b, - a: this.a - }); + const payload = { + r: parseInt(this.r), + g: parseInt(this.g), + b: parseInt(this.b), + a: parseFloat(this.a) + }; HTTP.put("/system/style/Bottlenecks/stroke", payload, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" + "Content-type": "application/json" } }) .then() .catch(error => { - this.loginFailed = true; - this.submitted = false; const { status, data } = error.response; displayError({ title: "Backend Error", @@ -92,15 +91,18 @@ HTTP.get("/system/style/Bottlenecks/stroke", { headers: { "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" + "Content-type": "application/json" } }) .then(response => { - console.log(response); + // console.log(response.data); + let colour = response.data.colour; + this.r = colour.r; + this.g = colour.g; + this.b = colour.b; + this.a = colour.a; }) .catch(error => { - this.loginFailed = true; - this.submitted = false; const { status, data } = error.response; displayError({ title: "Backend Error",