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
  34           @updated="isDark = $event"
  35           :defaultValue="this.config.defaults.colorTheme"
  36         />
  37
  38         <SettingToggle
  39           @updated="vlayout = $event"
  40           name="vlayout"
  41           icon="fa-list"
  42           iconAlt="fa-columns"
  43           :defaultValue="this.config.defaults.layout == 'columns'"
  44         />
  45
  46         <SearchInput
  47           class="navbar-item is-inline-block-mobile"
  48           @input="filterServices"
  49           @search-focus="showMenu = true"
  50           @search-open="navigateToFirstService"
  51           @search-cancel="filterServices"
  52         />
  53       </Navbar>
  54     </div>
  55
  56     <section id="main-section" class="section">
  57       <div v-cloak class="container">
  58         <ConnectivityChecker
  59           v-if="config.connectivityCheck"
  60           @network-status-update="offline = $event"
  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 ConnectivityChecker from "./components/ConnectivityChecker.vue";
 137 import Service from "./components/Service.vue";
 138 import Message from "./components/Message.vue";
 139 import SearchInput from "./components/SearchInput.vue";
 140 import SettingToggle from "./components/SettingToggle.vue";
 141 import DarkMode from "./components/DarkMode.vue";
 142 import DynamicTheme from "./components/DynamicTheme.vue";
 143
 144 import defaultConfig from "./assets/defaults.yml";
 145
 146 export default {
 147   name: "App",
 148   components: {
 149     Navbar,
 150     ConnectivityChecker,
 151     Service,
 152     Message,
 153     SearchInput,
 154     SettingToggle,
 155     DarkMode,
 156     DynamicTheme,
 157   },
 158   data: function () {
 159     return {
 160       config: null,
 161       services: null,
 162       offline: false,
 163       filter: "",
 164       vlayout: true,
 165       isDark: null,
 166       showMenu: false,
 167     };
 168   },
 169   created: async function () {
 170     this.buildDashboard();
 171     window.onhashchange = this.buildDashboard;
 172   },
 173   methods: {
 174     buildDashboard: async function () {
 175       const defaults = jsyaml.load(defaultConfig);
 176       let config;
 177       try {
 178         config = await this.getConfig();
 179         const path =
 180           window.location.hash.substring(1) != ""
 181             ? window.location.hash.substring(1)
 182             : null;
 183
 184         if (path) {
 185           let pathConfig = await this.getConfig(`assets/${path}.yml`); // the slash (/) is included in the pathname
 186           config = Object.assign(config, pathConfig);
 187         }
 188       } catch (error) {
 189         console.log(error);
 190         config = this.handleErrors("⚠️ Error loading configuration", error);
 191       }
 192       this.config = merge(defaults, config);
 193       this.services = this.config.services;
 194       document.title =
 195         this.config.documentTitle ||
 196         `${this.config.title} | ${this.config.subtitle}`;
 197       if (this.config.stylesheet) {
 198         let stylesheet = "";
 199         for (const file of this.config.stylesheet) {
 200           stylesheet += `@import "${file}";`;
 201         }
 202         this.createStylesheet(stylesheet);
 203       }
 204     },
 205     getConfig: function (path = "assets/config.yml") {
 206       return fetch(path).then((response) => {
 207         if (response.redirected) {
 208           // This allows to work with authentication proxies.
 209           window.location.href = response.url;
 210           return;
 211         }
 212         if (!response.ok) {
 213           throw Error(`${response.statusText}: ${response.body}`);
 214         }
 215
 216         const that = this;
 217         return response
 218           .text()
 219           .then((body) => {
 220             return jsyaml.load(body);
 221           })
 222           .then(function (config) {
 223             if (config.externalConfig) {
 224               return that.getConfig(config.externalConfig);
 225             }
 226             return config;
 227           });
 228       });
 229     },
 230     matchesFilter: function (item) {
 231       return (
 232         item.name.toLowerCase().includes(this.filter) ||
 233         (item.subtitle && item.subtitle.toLowerCase().includes(this.filter)) ||
 234         (item.tag && item.tag.toLowerCase().includes(this.filter))
 235       );
 236     },
 237     navigateToFirstService: function (target) {
 238       try {
 239         const service = this.services[0].items[0];
 240         window.open(service.url, target || service.target || "_self");
 241       } catch (error) {
 242         console.warning("fail to open service");
 243       }
 244     },
 245     filterServices: function (filter) {
 246       this.filter = filter;
 247
 248       if (!filter) {
 249         this.services = this.config.services;
 250         return;
 251       }
 252
 253       const searchResultItems = [];
 254       for (const group of this.config.services) {
 255         for (const item of group.items) {
 256           if (this.matchesFilter(item)) {
 257             searchResultItems.push(item);
 258           }
 259         }
 260       }
 261
 262       this.services = [
 263         {
 264           name: filter,
 265           icon: "fas fa-search",
 266           items: searchResultItems,
 267         },
 268       ];
 269     },
 270     handleErrors: function (title, content) {
 271       return {
 272         message: {
 273           title: title,
 274           style: "is-danger",
 275           content: content,
 276         },
 277       };
 278     },
 279     createStylesheet: function (css) {
 280       let style = document.createElement("style");
 281       style.appendChild(document.createTextNode(css));
 282       document.head.appendChild(style);
 283     },
 284   },
 285 };
 286 </script>