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             <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
  17             <i v-if="config.icon" :class="config.icon"></i>
  18           </div>
  19           <div class="dashboard-title">
  20             <span class="headline">{{ config.subtitle }}</span>
  21             <h1>{{ config.title }}</h1>
  22           </div>
  23         </div>
  24       </section>
  25
  26       <Navbar
  27         :open="showMenu"
  28         :links="config.links"
  29         @navbar:toggle="showMenu = !showMenu"
  30       >
  31         <DarkMode @updated="isDark = $event" />
  32
  33         <SettingToggle
  34           @updated="vlayout = $event"
  35           name="vlayout"
  36           icon="fa-list"
  37           iconAlt="fa-columns"
  38         />
  39
  40         <SearchInput
  41           class="navbar-item is-inline-block-mobile"
  42           @input="filterServices"
  43           @search:focus="showMenu = true"
  44           @search:open="navigateToFirstService"
  45           @search:cancel="filterServices"
  46         />
  47       </Navbar>
  48     </div>
  49
  50     <section id="main-section" class="section">
  51       <div v-cloak class="container">
  52         <ConnectivityChecker @network:status-update="offline = $event" />
  53         <div v-if="!offline">
  54           <!-- Optional messages -->
  55           <Message :item="config.message" />
  56
  57           <!-- Horizontal layout -->
  58           <div v-if="!vlayout || filter" class="columns is-multiline">
  59             <template v-for="group in services">
  60               <h2 v-if="group.name" class="column is-full group-title">
  61                 <i v-if="group.icon" :class="group.icon"></i>
  62                 {{ group.name }}
  63               </h2>
  64               <Service
  65                 v-for="item in group.items"
  66                 :key="item.url"
  67                 v-bind:item="item"
  68                 class="column is-one-third-widescreen"
  69               />
  70             </template>
  71           </div>
  72
  73           <!-- Vertical layout -->
  74           <div
  75             v-if="!filter && vlayout"
  76             class="columns is-multiline layout-vertical"
  77           >
  78             <div
  79               class="column is-one-third-widescreen"
  80               v-for="group in services"
  81               :key="group.name"
  82             >
  83               <h2 v-if="group.name" class="group-title">
  84                 <i v-if="group.icon" :class="group.icon"></i>
  85                 {{ group.name }}
  86               </h2>
  87               <Service
  88                 v-for="item in group.items"
  89                 v-bind:item="item"
  90                 :key="item.url"
  91               />
  92             </div>
  93           </div>
  94         </div>
  95       </div>
  96     </section>
  97
  98     <footer class="footer">
  99       <div class="container">
 100         <div
 101           class="content has-text-centered"
 102           v-if="config.footer"
 103           v-html="config.footer"
 104         ></div>
 105       </div>
 106     </footer>
 107   </div>
 108 </template>
 109
 110 <script>
 111 const jsyaml = require("js-yaml");
 112 const merge = require("lodash.merge");
 113
 114 import Navbar from "./components/Navbar.vue";
 115 import ConnectivityChecker from "./components/ConnectivityChecker.vue";
 116 import Service from "./components/Service.vue";
 117 import Message from "./components/Message.vue";
 118 import SearchInput from "./components/SearchInput.vue";
 119 import SettingToggle from "./components/SettingToggle.vue";
 120 import DarkMode from "./components/DarkMode.vue";
 121 import DynamicTheme from "./components/DynamicTheme.vue";
 122
 123 import defaultConfig from "./assets/defaults.yml";
 124
 125 export default {
 126   name: "App",
 127   components: {
 128     Navbar,
 129     ConnectivityChecker,
 130     Service,
 131     Message,
 132     SearchInput,
 133     SettingToggle,
 134     DarkMode,
 135     DynamicTheme,
 136   },
 137   data: function () {
 138     return {
 139       config: null,
 140       services: null,
 141       offline: false,
 142       filter: "",
 143       vlayout: true,
 144       isDark: null,
 145       showMenu: false,
 146     };
 147   },
 148   created: async function () {
 149     const defaults = jsyaml.load(defaultConfig);
 150     let config = await this.getConfig();
 151     this.config = merge(defaults, config);
 152     this.services = this.config.services;
 153     document.title = `${this.config.title} | ${this.config.subtitle}`;
 154   },
 155   methods: {
 156     getConfig: function () {
 157       return fetch("config.yml")
 158         .then((response) => {
 159           if (!response.ok) {
 160             throw Error(response.statusText);
 161           }
 162           return response.text().then((body) => {
 163             return jsyaml.load(body);
 164           });
 165         })
 166         .catch((error) => {
 167           return this.handleErrors("⚠️ Error loading configuration", error);
 168         });
 169     },
 170     matchesFilter: function (item) {
 171       return (
 172         item.name.toLowerCase().includes(this.filter) ||
 173         (item.tag && item.tag.toLowerCase().includes(this.filter))
 174       );
 175     },
 176     navigateToFirstService: function (target) {
 177       try {
 178         const service = this.services[0].items[0];
 179         window.open(service.url, target || service.target || "_self");
 180       } catch (error) {
 181         console.warning("fail to open service");
 182       }
 183     },
 184     filterServices: function (filter) {
 185       this.filter = filter;
 186
 187       if (!filter) {
 188         this.services = this.config.services;
 189         return;
 190       }
 191
 192       const searchResultItems = [];
 193       for (const group of this.config.services) {
 194         for (const item of group.items) {
 195           if (this.matchesFilter(item)) {
 196             searchResultItems.push(item);
 197           }
 198         }
 199       }
 200
 201       this.services = [
 202         {
 203           name: filter,
 204           icon: "fas fa-search",
 205           items: searchResultItems,
 206         },
 207       ];
 208     },
 209     handleErrors: function (title, content) {
 210       return {
 211         message: {
 212           title: title,
 213           style: "is-danger",
 214           content: content,
 215         },
 216       };
 217     },
 218   },
 219 };
 220 </script>