Mercurial > gemma
view client/src/systemconfiguration/systemconfiguration.vue @ 864:2079fabbe6dd
client: add fill-colour setting to systemconfig
* Add simple headlines to show what we are setting.
* Add a section to select a colour with the vue-color chrome-picker.
* yarn add vue-color.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 21:39:01 +0200 |
parents | d1863e91b039 |
children | 9aa545585bdd |
line wrap: on
line source
<template> <div class="d-flex flex-row"> <div class="card sysconfig"> <div class="card-header shadow-sm text-white bg-info mb-6"> Systemconfiguration </div> <div class="card-body"> <h4>Bottleneck Areas stroke-color</h4> <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="255"> </div> <div class="col-2"> <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.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.number="a" type="text" id="a" placeholder="1.0"> </div> </div> <div class="sendbutton"> <a @click.prevent="submit" class="btn btn-info">Send</a> </div> <h4>Bottleneck Areas fill-color</h4> <chrome-picker v-model="fillColor" /> </div> <!-- card-body --> </div> </div> </template> <style lang="scss"> .sendbutton { position: absolute; right: $large-offset; bottom: $large-offset; } .inputs { margin-left: auto; margin-right: auto; } .sysconfig { margin-top: $offset; margin-left: 30vw; margin-right: auto; width: 60vw; max-width: 500px; mind-heigth: 500px; height: 80vh; } </style> <script> import { Chrome } from "vue-color"; import { HTTP } from "../application/lib/http"; import { displayError } from "../application/lib/errors.js"; export default { name: "systemconfiguration", data() { return { sent: false, r: 124, g: 115, b: 116, a: 0.9, fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, currentConfig: null }; }, components: { "chrome-picker": Chrome }, methods: { submit() { 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": "application/json" } }) .then() .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } }) .then() .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }, mounted() { HTTP.get("/system/style/Bottlenecks/stroke", { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } }) .then(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 => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); HTTP.get("/system/style/Bottlenecks/fill", { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } }) .then(response => { this.fillColor = response.data.colour; }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }; </script>