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