Mercurial > gemma
changeset 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 | f868570da418 |
| files | client/package.json client/src/systemconfiguration/systemconfiguration.vue client/yarn.lock |
| diffstat | 3 files changed, 88 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Fri Sep 28 20:58:38 2018 +0200 +++ b/client/package.json Fri Sep 28 21:39:01 2018 +0200 @@ -28,6 +28,7 @@ "purgecss-webpack-plugin": "^1.2.1", "v-tooltip": "^2.0.0-rc.33", "vue": "^2.5.16", + "vue-color": "^2.6.0", "vue-highlightjs": "^1.3.3", "vue-router": "^3.0.1", "vuex": "^3.0.1"
--- a/client/src/systemconfiguration/systemconfiguration.vue Fri Sep 28 20:58:38 2018 +0200 +++ b/client/src/systemconfiguration/systemconfiguration.vue Fri Sep 28 21:39:01 2018 +0200 @@ -1,31 +1,34 @@ <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 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="card-body"> - <div class="inputs form-group row"> + <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="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255"> - </div> + <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="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="submit" class="btn btn-info">Send</a> - </div> - </div> + <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> + <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"> @@ -44,11 +47,14 @@ margin-right: auto; width: 60vw; max-width: 500px; - height: 40vh; + 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 { @@ -60,9 +66,11 @@ 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 = { @@ -85,6 +93,21 @@ 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() { @@ -109,6 +132,23 @@ 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>
--- a/client/yarn.lock Fri Sep 28 20:58:38 2018 +0200 +++ b/client/yarn.lock Fri Sep 28 21:39:01 2018 +0200 @@ -6814,6 +6814,11 @@ resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664" integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ= +lodash.throttle@^4.0.0: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= + lodash.transform@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0" @@ -6922,6 +6927,11 @@ dependencies: object-visit "^1.0.0" +material-colors@^1.0.0: + version "1.2.6" + resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46" + integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg== + math-random@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac" @@ -10231,6 +10241,11 @@ resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tinycolor2@^1.1.2: + version "1.4.1" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" + integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g= + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" @@ -10683,6 +10698,15 @@ resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w= +vue-color@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.6.0.tgz#a4ef85b871cef4d47bf662c3b54321d2bb96f349" + integrity sha512-C/SqU/KScPHh6Br32nzQ4LWxzv88r8taGb6MrBHiOXZdkAQp2SpfYdav3K/u9xuWULqwgp2LNYaRPdrIm3A7HQ== + dependencies: + lodash.throttle "^4.0.0" + material-colors "^1.0.0" + tinycolor2 "^1.1.2" + vue-eslint-parser@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"