src/App.vue

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