aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Message.vue34
-rw-r--r--src/components/services/Generic.vue35
2 files changed, 42 insertions, 27 deletions
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 5a1e0ea..2f71f3f 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -29,19 +29,26 @@ export default {
29 created: async function () { 29 created: async function () {
30 // Look for a new message if an endpoint is provided. 30 // Look for a new message if an endpoint is provided.
31 this.message = Object.assign({}, this.item); 31 this.message = Object.assign({}, this.item);
32 if (this.item && this.item.url) { 32 await this.getMessage();
33 const fetchedMessage = await this.getMessage(this.item.url);
34 // keep the original config value if no value is provided by the endpoint
35 for (const prop of ["title", "style", "content"]) {
36 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
37 this.message[prop] = fetchedMessage[prop];
38 }
39 }
40 }
41 this.show = this.message.title || this.message.content; 33 this.show = this.message.title || this.message.content;
42 }, 34 },
35
43 methods: { 36 methods: {
44 getMessage: function (url) { 37 getMessage: async function() {
38 if (this.item && this.item.url) {
39 let fetchedMessage = await this.downloadMessage(this.item.url);
40 if (this.item.mapping) fetchedMessage = this.mapRemoteMessage(fetchedMessage);
41 // keep the original config value if no value is provided by the endpoint
42 for (const prop of ["title", "style", "content"]) {
43 if (prop in fetchedMessage && fetchedMessage[prop] !== null) {
44 this.message[prop] = fetchedMessage[prop];
45 }
46 }
47 }
48 if (this.item.refreshInterval) setTimeout(this.getMessage, this.item.refreshInterval);
49 },
50
51 downloadMessage: function (url) {
45 return fetch(url).then(function (response) { 52 return fetch(url).then(function (response) {
46 if (response.status != 200) { 53 if (response.status != 200) {
47 return; 54 return;
@@ -49,6 +56,13 @@ export default {
49 return response.json(); 56 return response.json();
50 }); 57 });
51 }, 58 },
59
60 mapRemoteMessage: function (message) {
61 let mapped = {};
62 // map property from message into mapped according to mapping config (only if field has a value):
63 for (const prop in this.item.mapping) if (message[this.item.mapping[prop]]) mapped[prop] = message[this.item.mapping[prop]];
64 return mapped;
65 },
52 }, 66 },
53}; 67};
54</script> 68</script>
diff --git a/src/components/services/Generic.vue b/src/components/services/Generic.vue
index 3238ead..08bd3f6 100644
--- a/src/components/services/Generic.vue
+++ b/src/components/services/Generic.vue
@@ -1,16 +1,3 @@
1<script>
2export default {};
3</script>
4
5<style></style>
6*/
7
8<script>
9export default {};
10</script>
11
12<style></style>
13
14<template> 1<template>
15 <div> 2 <div>
16 <div 3 <div
@@ -20,7 +7,7 @@ export default {};
20 > 7 >
21 <a :href="item.url" :target="item.target" rel="noreferrer"> 8 <a :href="item.url" :target="item.target" rel="noreferrer">
22 <div class="card-content"> 9 <div class="card-content">
23 <div class="media"> 10 <div :class="mediaClass">
24 <div v-if="item.logo" class="media-left"> 11 <div v-if="item.logo" class="media-left">
25 <figure class="image is-48x48"> 12 <figure class="image is-48x48">
26 <img :src="item.logo" :alt="`${item.name} logo`" /> 13 <img :src="item.logo" :alt="`${item.name} logo`" />
@@ -33,7 +20,9 @@ export default {};
33 </div> 20 </div>
34 <div class="media-content"> 21 <div class="media-content">
35 <p class="title is-4">{{ item.name }}</p> 22 <p class="title is-4">{{ item.name }}</p>
36 <p class="subtitle is-6">{{ item.subtitle }}</p> 23 <p class="subtitle is-6" v-if="item.subtitle">
24 {{ item.subtitle }}
25 </p>
37 </div> 26 </div>
38 </div> 27 </div>
39 <div class="tag" :class="item.tagstyle" v-if="item.tag"> 28 <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -51,11 +40,23 @@ export default {
51 props: { 40 props: {
52 item: Object, 41 item: Object,
53 }, 42 },
43 computed: {
44 mediaClass: function () {
45 return { media: true, "no-subtitle": !this.item.subtitle };
46 },
47 },
54}; 48};
55</script> 49</script>
56 50
57<style scoped lang="scss"> 51<style scoped lang="scss">
58.media-left img { 52.media-left {
59 max-height: 100%; 53 .image {
54 display: flex;
55 align-items: center;
56 }
57
58 img {
59 max-height: 100%;
60 }
60} 61}
61</style> 62</style>