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.target?.value)"
  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 jsyaml from "js-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 = jsyaml.load(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(`assets/${this.currentPage}.yml`);
 211           config = Object.assign(config, pageConfig);
 212         }
 213       } catch (error) {
 214         console.log(error);
 215         config = this.handleErrors("⚠️ Error loading configuration", error);
 216       }
 217       this.config = merge(defaults, config);
 218       this.services = this.config.services;
 219
 220       document.title =
 221         this.config.documentTitle ||
 222         `${this.config.title} | ${this.config.subtitle}`;
 223       if (this.config.stylesheet) {
 224         let stylesheet = "";
 225         for (const file of this.config.stylesheet) {
 226           stylesheet += `@import "${file}";`;
 227         }
 228         this.createStylesheet(stylesheet);
 229       }
 230     },
 231     getConfig: function (path = "assets/config.yml") {
 232       return fetch(path).then((response) => {
 233         if (response.status == 404 || response.redirected) {
 234           this.configNotFound = true;
 235           return {};
 236         }
 237
 238         if (!response.ok) {
 239           throw Error(`${response.statusText}: ${response.body}`);
 240         }
 241
 242         const that = this;
 243         return response
 244           .text()
 245           .then((body) => {
 246             return jsyaml.load(body);
 247           })
 248           .then(function (config) {
 249             if (config.externalConfig) {
 250               return that.getConfig(config.externalConfig);
 251             }
 252             return config;
 253           });
 254       });
 255     },
 256     matchesFilter: function (item) {
 257       const needle = this.filter?.toLowerCase();
 258       return (
 259         item.name.toLowerCase().includes(needle) ||
 260         (item.subtitle && item.subtitle.toLowerCase().includes(needle)) ||
 261         (item.tag && item.tag.toLowerCase().includes(needle)) ||
 262         (item.keywords && item.keywords.toLowerCase().includes(needle))
 263       );
 264     },
 265     navigateToFirstService: function (target) {
 266       try {
 267         const service = this.services[0].items[0];
 268         window.open(service.url, target || service.target || "_self");
 269       } catch (error) {
 270         console.warning("fail to open service");
 271       }
 272     },
 273     filterServices: function (filter) {
 274       console.log(filter);
 275       this.filter = filter;
 276
 277       if (!filter) {
 278         this.services = this.config.services;
 279         return;
 280       }
 281
 282       const searchResultItems = [];
 283       for (const group of this.config.services) {
 284         for (const item of group.items) {
 285           if (this.matchesFilter(item)) {
 286             searchResultItems.push(item);
 287           }
 288         }
 289       }
 290
 291       this.services = [
 292         {
 293           name: filter,
 294           icon: "fas fa-search",
 295           items: searchResultItems,
 296         },
 297       ];
 298     },
 299     handleErrors: function (title, content) {
 300       return {
 301         message: {
 302           title: title,
 303           style: "is-danger",
 304           content: content,
 305         },
 306       };
 307     },
 308     createStylesheet: function (css) {
 309       let style = document.createElement("style");
 310       style.appendChild(document.createTextNode(css));
 311       document.head.appendChild(style);
 312     },
 313   },
 314 };
 315 </script>