src/App.vue

   1 <template>
   2   <div
   3     id="app"
   4     v-if="config"
   5     :class="[
   6       `theme-${config.theme}`,
   7       `page-${currentPage}`,
   8       isDark ? 'is-dark' : 'is-light',
   9       !config.footer ? 'no-footer' : '',
  10     ]"
  11   >
  12     <DynamicTheme :themes="config.colors" />
  13     <div id="bighead">
  14       <section v-if="config.header" class="first-line">
  15         <div v-cloak class="container">
  16           <div class="logo">
  17             <a href="#">
  18               <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
  19             </a>
  20             <i v-if="config.icon" :class="config.icon"></i>
  21           </div>
  22           <div
  23             class="dashboard-title"
  24             :class="{ 'no-logo': !config.icon || !config.logo }"
  25           >
  26             <span class="headline">{{ config.subtitle }}</span>
  27             <h1>{{ config.title }}</h1>
  28           </div>
  29         </div>
  30       </section>
  31
  32       <Navbar
  33         :open="showMenu"
  34         :links="config.links"
  35         @navbar-toggle="showMenu = !showMenu"
  36       >
  37         <DarkMode
  38           @updated="isDark = $event"
  39           :defaultValue="this.config.defaults.colorTheme"
  40         />
  41
  42         <SettingToggle
  43           @updated="vlayout = $event"
  44           name="vlayout"
  45           icon="fa-list"
  46           iconAlt="fa-columns"
  47           :defaultValue="this.config.defaults.layout == 'columns'"
  48         />
  49
  50         <SearchInput
  51           class="navbar-item is-inline-block-mobile"
  52           :hotkey="searchHotkey()"
  53           @input="filterServices($event)"
  54           @search-focus="showMenu = true"
  55           @search-open="navigateToFirstService($event?.target?.value)"
  56           @search-cancel="filterServices()"
  57         />
  58       </Navbar>
  59     </div>
  60
  61     <section id="main-section" class="section">
  62       <div v-cloak class="container">
  63         <ConnectivityChecker
  64           v-if="config.connectivityCheck"
  65           @network-status-update="offline = $event"
  66         />
  67
  68         <GetStarted v-if="configurationNeeded" />
  69
  70         <div v-if="!offline">
  71           <!-- Optional messages -->
  72           <Message :item="config.message" />
  73
  74           <!-- Horizontal layout -->
  75           <div v-if="!vlayout || filter" class="columns is-multiline">
  76             <template v-for="(group, groupIndex) in services">
  77               <h2
  78                 v-if="group.name"
  79                 class="column is-full group-title"
  80                 :key="`header-${groupIndex}`"
  81               >
  82                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
  83                 <div v-else-if="group.logo" class="group-logo media-left">
  84                   <figure class="image is-48x48">
  85                     <img :src="group.logo" :alt="`${group.name} logo`" />
  86                   </figure>
  87                 </div>
  88                 {{ group.name }}
  89               </h2>
  90               <Service
  91                 v-for="(item, index) in group.items"
  92                 :key="`service-${groupIndex}-${index}`"
  93                 :item="item"
  94                 :proxy="config.proxy"
  95                 :class="['column', `is-${12 / config.columns}`]"
  96               />
  97             </template>
  98           </div>
  99
 100           <!-- Vertical layout -->
 101           <div
 102             v-if="!filter && vlayout"
 103             class="columns is-multiline layout-vertical"
 104           >
 105             <div
 106               :class="['column', `is-${12 / config.columns}`]"
 107               v-for="(group, groupIndex) in services"
 108               :key="groupIndex"
 109             >
 110               <h2 v-if="group.name" class="group-title">
 111                 <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
 112                 <div v-else-if="group.logo" class="group-logo media-left">
 113                   <figure class="image is-48x48">
 114                     <img :src="group.logo" :alt="`${group.name} logo`" />
 115                   </figure>
 116                 </div>
 117                 {{ group.name }}
 118               </h2>
 119               <Service
 120                 v-for="(item, index) in group.items"
 121                 :key="index"
 122                 :item="item"
 123                 :proxy="config.proxy"
 124               />
 125             </div>
 126           </div>
 127         </div>
 128       </div>
 129     </section>
 130
 131     <footer class="footer">
 132       <div class="container">
 133         <div
 134           class="content has-text-centered"
 135           v-if="config.footer"
 136           v-html="config.footer"
 137         ></div>
 138       </div>
 139     </footer>
 140   </div>
 141 </template>
 142
 143 <script>
 144 import { parse } from "yaml";
 145 import merge from "lodash.merge";
 146
 147 import Navbar from "./components/Navbar.vue";
 148 import GetStarted from "./components/GetStarted.vue";
 149 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 150 import Service from "./components/Service.vue";
 151 import Message from "./components/Message.vue";
 152 import SearchInput from "./components/SearchInput.vue";
 153 import SettingToggle from "./components/SettingToggle.vue";
 154 import DarkMode from "./components/DarkMode.vue";
 155 import DynamicTheme from "./components/DynamicTheme.vue";
 156
 157 import defaultConfig from "./assets/defaults.yml?raw";
 158
 159 export default {
 160   name: "App",
 161   components: {
 162     Navbar,
 163     GetStarted,
 164     ConnectivityChecker,
 165     Service,
 166     Message,
 167     SearchInput,
 168     SettingToggle,
 169     DarkMode,
 170     DynamicTheme,
 171   },
 172   data: function () {
 173     return {
 174       loaded: false,
 175       currentPage: null,
 176       configNotFound: false,
 177       config: null,
 178       services: null,
 179       offline: false,
 180       filter: "",
 181       vlayout: true,
 182       isDark: null,
 183       showMenu: false,
 184     };
 185   },
 186   computed: {
 187     configurationNeeded: function () {
 188       return (this.loaded && !this.services) || this.configNotFound;
 189     },
 190   },
 191   created: async function () {
 192     this.buildDashboard();
 193     window.onhashchange = this.buildDashboard;
 194     this.loaded = true;
 195   },
 196   methods: {
 197     searchHotkey() {
 198       if (this.config.hotkey && this.config.hotkey.search) {
 199         return this.config.hotkey.search;
 200       }
 201     },
 202     buildDashboard: async function () {
 203       const defaults = parse(defaultConfig);
 204       let config;
 205       try {
 206         config = await this.getConfig();
 207         this.currentPage = window.location.hash.substring(1) || "default";
 208
 209         if (this.currentPage !== "default") {
 210           let pageConfig = await this.getConfig(
 211             `assets/${this.currentPage}.yml`
 212           );
 213           config = Object.assign(config, pageConfig);
 214         }
 215       } catch (error) {
 216         console.log(error);
 217         config = this.handleErrors("⚠️ Error loading configuration", error);
 218       }
 219       this.config = merge(defaults, config);
 220       this.services = this.config.services;
 221
 222       document.title =
 223         this.config.documentTitle ||
 224         `${this.config.title} | ${this.config.subtitle}`;
 225       if (this.config.stylesheet) {
 226         let stylesheet = "";
 227         for (const file of this.config.stylesheet) {
 228           stylesheet += `@import "${file}";`;
 229         }
 230         this.createStylesheet(stylesheet);
 231       }
 232     },
 233     getConfig: function (path = "assets/config.yml") {
 234       return fetch(path).then((response) => {
 235         if (response.status == 404 || response.redirected) {
 236           this.configNotFound = true;
 237           return {};
 238         }
 239
 240         if (!response.ok) {
 241           throw Error(`${response.statusText}: ${response.body}`);
 242         }
 243
 244         const that = this;
 245         return response
 246           .text()
 247           .then((body) => {
 248             return parse(body, {merge: true});
 249           })
 250           .then(function (config) {
 251             if (config.externalConfig) {
 252               return that.getConfig(config.externalConfig);
 253             }
 254             return config;
 255           });
 256       });
 257     },
 258     matchesFilter: function (item) {
 259       const needle = this.filter?.toLowerCase();
 260       return (
 261         item.name.toLowerCase().includes(needle) ||
 262         (item.subtitle && item.subtitle.toLowerCase().includes(needle)) ||
 263         (item.tag && item.tag.toLowerCase().includes(needle)) ||
 264         (item.keywords && item.keywords.toLowerCase().includes(needle))
 265       );
 266     },
 267     navigateToFirstService: function (target) {
 268       try {
 269         const service = this.services[0].items[0];
 270         window.open(service.url, target || service.target || "_self");
 271       } catch (error) {
 272         console.warning("fail to open service");
 273       }
 274     },
 275     filterServices: function (filter) {
 276       console.log(filter);
 277       this.filter = filter;
 278
 279       if (!filter) {
 280         this.services = this.config.services;
 281         return;
 282       }
 283
 284       const searchResultItems = [];
 285       for (const group of this.config.services) {
 286         for (const item of group.items) {
 287           if (this.matchesFilter(item)) {
 288             searchResultItems.push(item);
 289           }
 290         }
 291       }
 292
 293       this.services = [
 294         {
 295           name: filter,
 296           icon: "fas fa-search",
 297           items: searchResultItems,
 298         },
 299       ];
 300     },
 301     handleErrors: function (title, content) {
 302       return {
 303         message: {
 304           title: title,
 305           style: "is-danger",
 306           content: content,
 307         },
 308       };
 309     },
 310     createStylesheet: function (css) {
 311       let style = document.createElement("style");
 312       style.appendChild(document.createTextNode(css));
 313       document.head.appendChild(style);
 314     },
 315   },
 316 };
 317 </script>