]>
Commit | Line | Data |
---|---|---|
9baec9ae | 1 | const app = new Vue({ |
09763dbf BW |
2 | el: '#app', |
3 | data: { | |
4 | config: null, | |
9baec9ae BW |
5 | offline: false, |
6 | filter: '', | |
5323df4a | 7 | vlayout: true, |
7cc525b2 T |
8 | isDark: null, |
9 | showMenu: false | |
09763dbf | 10 | }, |
7fd9dc6f | 11 | created: async function () { |
9ca12a40 | 12 | let that = this; |
7fd9dc6f | 13 | |
a489a0a3 | 14 | this.isDark = 'overrideDark' in localStorage ? |
d6adb2db | 15 | JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches; |
9ca12a40 | 16 | |
d6adb2db BW |
17 | if ('vlayout' in localStorage) { |
18 | this.vlayout = JSON.parse(localStorage.vlayout) | |
19 | } | |
a489a0a3 | 20 | |
9baec9ae | 21 | this.checkOffline(); |
7fd9dc6f BW |
22 | try { |
23 | this.config = await this.getConfig(); | |
24 | } catch (error) { | |
25 | this.offline = true; | |
26 | } | |
27 | ||
28 | // Look for a new message if an endpoint is provided. | |
d5ef84f5 | 29 | if (this.config.message && this.config.message.url) { |
7fd9dc6f BW |
30 | this.getMessage(this.config.message.url).then(function(message){ |
31 | // keep the original config value if no value is provided by the endpoint | |
32 | for (const prop of ['title','style','content']) { | |
33 | if (prop in message && message[prop] !== null) { | |
34 | that.config.message[prop] = message[prop]; | |
35 | } | |
36 | } | |
37 | }); | |
38 | } | |
9baec9ae BW |
39 | |
40 | document.addEventListener('visibilitychange', function () { | |
41 | if (document.visibilityState == "visible") { | |
42 | that.checkOffline(); | |
43 | } | |
44 | }, false); | |
45 | }, | |
46 | methods: { | |
47 | checkOffline: function () { | |
48 | let that = this; | |
49 | return fetch(window.location.href + "?alive", { | |
50 | method: 'HEAD', | |
51 | cache: 'no-store' | |
52 | }).then(function () { | |
53 | that.offline = false; | |
54 | }).catch(function () { | |
55 | that.offline = true; | |
56 | }); | |
57 | }, | |
58 | getConfig: function (event) { | |
59 | return fetch('config.yml').then(function (response) { | |
60 | if (response.status != 200) { | |
61 | return | |
62 | } | |
63 | return response.text().then(function (body) { | |
64 | return jsyaml.load(body); | |
65 | }); | |
66 | }); | |
67 | }, | |
7fd9dc6f BW |
68 | getMessage: function (url) { |
69 | return fetch(url).then(function (response) { | |
70 | if (response.status != 200) { | |
71 | return; | |
72 | } | |
73 | return response.json(); | |
74 | }); | |
75 | }, | |
5323df4a | 76 | toggleTheme: function() { |
d6adb2db BW |
77 | this.isDark = !this.isDark; |
78 | localStorage.overrideDark = this.isDark; | |
79 | }, | |
80 | toggleLayout: function() { | |
81 | this.vlayout = !this.vlayout; | |
a489a0a3 FB |
82 | localStorage.vlayout = this.vlayout; |
83 | }, | |
7cc525b2 T |
84 | toggleMenu: function() { |
85 | this.showMenu = !this.showMenu; | |
86 | } | |
09763dbf BW |
87 | } |
88 | }); | |
89 | ||
4877ec98 BW |
90 | Vue.component('service', { |
91 | props: ['item'], | |
92 | template: `<div> | |
93 | <div class="card"> | |
56c69e0d | 94 | <a :href="item.url" :target="item.target"> |
4877ec98 BW |
95 | <div class="card-content"> |
96 | <div class="media"> | |
97 | <div v-if="item.logo" class="media-left"> | |
98 | <figure class="image is-48x48"> | |
99 | <img :src="item.logo" /> | |
100 | </figure> | |
101 | </div> | |
102 | <div v-if="item.icon" class="media-left"> | |
103 | <figure class="image is-48x48"> | |
104 | <i style="font-size: 35px" :class="item.icon"></i> | |
105 | </figure> | |
106 | </div> | |
107 | <div class="media-content"> | |
108 | <p class="title is-4">{{ item.name }}</p> | |
109 | <p class="subtitle is-6">{{ item.subtitle }}</p> | |
110 | </div> | |
111 | </div> | |
a2fdb8a9 | 112 | <div class="tag" :class="item.tagstyle" v-if="item.tag"> |
113 | <strong class="tag-text">#{{ item.tag }}</strong> | |
114 | </div> | |
4877ec98 BW |
115 | </div> |
116 | </a> | |
117 | </div></div>` | |
118 | }); | |
119 | ||
9baec9ae BW |
120 | if ('serviceWorker' in navigator) { |
121 | window.addEventListener('load', function () { | |
a489a0a3 | 122 | navigator.serviceWorker.register('worker.js'); |
09763dbf | 123 | }); |
e41196e7 | 124 | } |