Mercurial > gemma
view client/src/systemconfiguration/systemconfiguration.vue @ 904:e4b72a199258
New default bottleneck colors
Mainly to make the stroke color one actually selectable in the ui.
In addition the pink does better match the collors used on the ECDIS layer.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Tue, 02 Oct 2018 13:34:59 +0200 |
parents | aae517757923 |
children | ca628dce90dd |
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 config"> <section class="configsection"> <h4 class="card-title">Bottleneck Areas stroke-color</h4> <compact-picker v-model="strokeColor" /> </section> <section> <h4 class="card-title">Bottleneck Areas fill-color</h4> <chrome-picker v-model="fillColor" /> </section> <div class="sendbutton"> <a @click.prevent="submit" class="btn btn-info">Send</a> </div> </div> <!-- card-body --> </div> </div> </template> <style scoped lang="scss"> .config { text-align: left; } .configsection { margin-bottom: $large-offset; } .sendbutton { position: absolute; right: $offset; bottom: $offset; } .inputs { margin-left: auto; margin-right: auto; } .sysconfig { margin-top: $offset; margin-left: auto; margin-right: auto; width: 30vw; } </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>