Mercurial > gemma
view client/src/systemconfiguration/systemconfiguration.vue @ 856:ce0d50b1d126
systemconfig WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 14:13:51 +0200 |
parents | |
children | d1863e91b039 |
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-3"> 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"> </div> <div class="col-2"> <label for="g"></label>G<input class="form-control form-control-sm" v-model="g" id="g" placeholder="g"> </div> <div class="col-2"> <label for="b"></label>B<input class="form-control form-control-sm" v-model="b" id="b" placeholder="b"> </div> <div class="col-2"> <label for="a"></label>A<input class="form-control form-control-sm" v-model="a" id="a" placeholder="a"> </div> </div> <div class="sendbutton"> <a @click="submit" class="btn btn-info">Send</a> </div> </div> </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: auto; margin-right: auto; width: 30vw; height: 40vh; } </style> <script> import { HTTP } from "../application/lib/http"; import { displayError } from "../application/lib/errors.js"; export default { name: "systemconfiguration", data() { return { sent: false, r: 224, g: 215, b: 216, a: 90, currentConfig: null }; }, methods: { submit() { const payload = JSON.stringify({ r: this.r, g: this.g, b: this.b, a: this.a }); HTTP.put("/system/style/Bottlenecks/stroke", payload, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } }) .then() .catch(error => { this.loginFailed = true; this.submitted = false; 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": "text/xml; charset=UTF-8" } }) .then(response => { console.log(response); }) .catch(error => { this.loginFailed = true; this.submitted = false; const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }; </script>