]>
Commit | Line | Data |
---|---|---|
b1de1f9e | 1 | <template> |
2 | <div> | |
3 | <div class="card" :class="item.class"> | |
4 | <a :href="item.url" :target="item.target" rel="noreferrer"> | |
5 | <div class="card-content"> | |
6 | <div class="media"> | |
7 | <div v-if="item.logo" class="media-left"> | |
8 | <figure class="image is-48x48"> | |
9 | <img :src="item.logo" :alt="`${item.name} logo`" /> | |
10 | </figure> | |
11 | </div> | |
12 | <div v-if="item.icon" class="media-left"> | |
13 | <figure class="image is-48x48"> | |
14 | <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i> | |
15 | </figure> | |
16 | </div> | |
17 | <div class="media-content"> | |
18 | <p class="title is-4">{{ item.name }}</p> | |
19 | <p class="subtitle is-6">{{ item.subtitle }}</p> | |
20 | </div> | |
21 | <div class="notifs"> | |
22 | <strong | |
23 | v-if="config !== null && config.system.news.unread > 0" | |
24 | class="notif news" | |
25 | title="News" | |
26 | >{{ config.system.news.unread }}</strong | |
27 | > | |
28 | <strong | |
29 | v-if="config !== null && config.main.logs.numWarnings > 0" | |
30 | class="notif warnings" | |
31 | title="Warning" | |
32 | >{{ config.main.logs.numWarnings }}</strong | |
33 | > | |
34 | <strong | |
35 | v-if="config !== null && config.main.logs.numErrors > 0" | |
36 | class="notif errors" | |
37 | title="Error" | |
38 | >{{ config.main.logs.numErrors }}</strong | |
39 | > | |
40 | <strong | |
41 | v-if="serverError" | |
42 | class="notif errors" | |
43 | title="Connection error to Medusa API, check url and apikey in config.yml" | |
44 | >?</strong | |
45 | > | |
46 | </div> | |
47 | </div> | |
48 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> | |
49 | <strong class="tag-text">#{{ item.tag }}</strong> | |
50 | </div> | |
51 | </div> | |
52 | </a> | |
53 | </div> | |
54 | </div> | |
55 | </template> | |
56 | ||
57 | <script> | |
58 | export default { | |
59 | name: "Medusa", | |
60 | props: { | |
61 | item: Object, | |
62 | }, | |
63 | data: () => { | |
64 | return { | |
65 | config: null, | |
66 | serverError: false, | |
67 | }; | |
68 | }, | |
69 | created: function () { | |
70 | this.fetchConfig(); | |
71 | }, | |
72 | methods: { | |
73 | fetchConfig: function () { | |
74 | fetch(`${this.item.url}/api/v2/config`, { | |
75 | credentials: "include", | |
76 | headers: { "X-Api-Key": `${this.item.apikey}` }, | |
77 | }) | |
78 | .then((response) => { | |
79 | if (response.status != 200) { | |
80 | throw new Error(response.statusText); | |
81 | } | |
82 | return response.json(); | |
83 | }) | |
84 | .then((conf) => { | |
85 | this.config = conf; | |
86 | }) | |
87 | .catch((e) => { | |
88 | console.log(e); | |
89 | this.serverError = true; | |
90 | }); | |
91 | }, | |
92 | }, | |
93 | }; | |
94 | </script> | |
95 | ||
96 | <style scoped lang="scss"> | |
97 | .media-left img { | |
98 | max-height: 100%; | |
99 | } | |
100 | .notifs { | |
101 | position: absolute; | |
102 | color: white; | |
103 | font-family: sans-serif; | |
104 | top: 0.3em; | |
105 | right: 0.5em; | |
106 | } | |
107 | .notif { | |
108 | padding-right: 0.35em; | |
109 | padding-left: 0.35em; | |
110 | padding-top: 0.2em; | |
111 | padding-bottom: 0.2em; | |
112 | border-radius: 0.25em; | |
113 | position: relative; | |
114 | margin-left: 0.3em; | |
115 | font-size: 0.8em; | |
116 | } | |
117 | .news { | |
118 | background-color: #777777; | |
119 | } | |
120 | ||
121 | .warnings { | |
122 | background-color: #d08d2e; | |
123 | } | |
124 | ||
125 | .errors { | |
126 | background-color: #e51111; | |
127 | } | |
128 | </style> |