aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/App.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/App.vue')
-rw-r--r--src/App.vue212
1 files changed, 212 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..8185da2
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,212 @@
1<template>
2 <div
3 id="app"
4 v-if="config"
5 :class="[
6 `theme-${config.theme}`,
7 isDark ? 'is-dark' : 'is-light',
8 !config.footer ? 'no-footer' : '',
9 ]"
10 >
11 <DynamicTheme :themes="config.colors" />
12 <div id="bighead">
13 <section v-if="config.header" class="first-line">
14 <div v-cloak class="container">
15 <div class="logo">
16 <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
17 <i v-if="config.icon" :class="config.icon"></i>
18 </div>
19 <div class="dashboard-title">
20 <span class="headline">{{ config.subtitle }}</span>
21 <h1>{{ config.title }}</h1>
22 </div>
23 </div>
24 </section>
25
26 <Navbar
27 :open="showMenu"
28 :links="config.links"
29 @navbar:toggle="showMenu = !showMenu"
30 >
31 <DarkMode @updated="isDark = $event" />
32
33 <SettingToggle
34 @updated="vlayout = $event"
35 name="vlayout"
36 icon="fa-list"
37 iconAlt="fa-columns"
38 />
39
40 <SearchInput
41 class="navbar-item is-inline-block-mobile"
42 @input="filterServices"
43 @search:focus="showMenu = true"
44 @search:open="navigateToFirstService"
45 @search:cancel="filterServices"
46 />
47 </Navbar>
48 </div>
49
50 <section id="main-section" class="section">
51 <div v-cloak class="container">
52 <ConnectivityChecker @network:status-update="offline = $event" />
53 <div v-if="!offline">
54 <!-- Optional messages -->
55 <Message :item="config.message" />
56
57 <!-- Horizontal layout -->
58 <div v-if="!vlayout || filter" class="columns is-multiline">
59 <template v-for="group in services">
60 <h2 v-if="group.name" class="column is-full group-title">
61 <i v-if="group.icon" :class="group.icon"></i>
62 {{ group.name }}
63 </h2>
64 <Service
65 v-for="item in group.items"
66 :key="item.url"
67 v-bind:item="item"
68 class="column is-one-third-widescreen"
69 />
70 </template>
71 </div>
72
73 <!-- Vertical layout -->
74 <div
75 v-if="!filter && vlayout"
76 class="columns is-multiline layout-vertical"
77 >
78 <div
79 class="column is-one-third-widescreen"
80 v-for="group in services"
81 :key="group.name"
82 >
83 <h2 v-if="group.name" class="group-title">
84 <i v-if="group.icon" :class="group.icon"></i>
85 {{ group.name }}
86 </h2>
87 <Service
88 v-for="item in group.items"
89 v-bind:item="item"
90 :key="item.url"
91 />
92 </div>
93 </div>
94 </div>
95 </div>
96 </section>
97
98 <footer class="footer">
99 <div class="container">
100 <div
101 class="content has-text-centered"
102 v-if="config.footer"
103 v-html="config.footer"
104 ></div>
105 </div>
106 </footer>
107 </div>
108</template>
109
110<script>
111const jsyaml = require("js-yaml");
112const merge = require("lodash.merge");
113
114import Navbar from "./components/Navbar.vue";
115import ConnectivityChecker from "./components/ConnectivityChecker.vue";
116import Service from "./components/Service.vue";
117import Message from "./components/Message.vue";
118import SearchInput from "./components/SearchInput.vue";
119import SettingToggle from "./components/SettingToggle.vue";
120import DarkMode from "./components/DarkMode.vue";
121import DynamicTheme from "./components/DynamicTheme.vue";
122
123import defaultConfig from "./assets/defaults.yml";
124
125export default {
126 name: "App",
127 components: {
128 Navbar,
129 ConnectivityChecker,
130 Service,
131 Message,
132 SearchInput,
133 SettingToggle,
134 DarkMode,
135 DynamicTheme,
136 },
137 data: function () {
138 return {
139 config: null,
140 services: null,
141 offline: false,
142 filter: "",
143 vlayout: true,
144 isDark: null,
145 showMenu: false,
146 };
147 },
148 created: async function () {
149 try {
150 const defaults = jsyaml.load(defaultConfig);
151 let config = await this.getConfig();
152
153 this.config = merge(defaults, config);
154 this.services = this.config.services;
155 document.title = `${this.config.title} | ${this.config.subtitle}`;
156 } catch (error) {
157 this.offline = true;
158 }
159 },
160 methods: {
161 getConfig: function () {
162 return fetch("config.yml").then(function (response) {
163 if (response.status != 200) {
164 return;
165 }
166 return response.text().then(function (body) {
167 return jsyaml.load(body);
168 });
169 });
170 },
171 matchesFilter: function (item) {
172 return (
173 item.name.toLowerCase().includes(this.filter) ||
174 (item.tag && item.tag.toLowerCase().includes(this.filter))
175 );
176 },
177 navigateToFirstService: function (target) {
178 try {
179 const service = this.services[0].items[0];
180 window.open(service.url, target || service.target || "_self");
181 } catch (error) {
182 console.warning("fail to open service");
183 }
184 },
185 filterServices: function (filter) {
186 this.filter = filter;
187
188 if (!filter) {
189 this.services = this.config.services;
190 return;
191 }
192
193 const searchResultItems = [];
194 for (const group of this.config.services) {
195 for (const item of group.items) {
196 if (this.matchesFilter(item)) {
197 searchResultItems.push(item);
198 }
199 }
200 }
201
202 this.services = [
203 {
204 name: filter,
205 icon: "fas fa-search",
206 items: searchResultItems,
207 },
208 ];
209 },
210 },
211};
212</script>