Mercurial > gemma
view client/src/systemconfiguration/systemconfiguration.vue @ 866:9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 22:18:25 +0200 |
parents | 2079fabbe6dd |
children | aae517757923 |
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> <compact-picker v-model="strokeColor" /> <h4>Bottleneck Areas fill-color</h4> <chrome-picker v-model="fillColor" /> <div class="sendbutton"> <a @click.prevent="submit" class="btn btn-info">Send</a> </div> </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 { Compact } from "vue-color"; import { HTTP } from "../application/lib/http"; import { displayError } from "../application/lib/errors.js"; export default { name: "systemconfiguration", data() { return { sent: false, strokeColor: { r: 0, g: 0, b: 0, a: 1.0 }, fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, currentConfig: null }; }, components: { "chrome-picker": Chrome, "compact-picker": Compact }, methods: { submit() { HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.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}` }); }); 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 => { this.strokeColor = response.data.colour; }) .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>