app.js

   1 const app = new Vue({
   2     el: '#app',
   3     data: {
   4         config: null,
   5         offline: false,
   6         filter: '',
   7         vlayout: true,
   8         isDark: null
   9     },
  10     created: async function () {
  11         let that = this;
  12
  13         this.isDark = 'overrideDark' in localStorage ?
  14             JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
  15
  16         if ('vlayout' in localStorage) {
  17             this.vlayout = JSON.parse(localStorage.vlayout)
  18         }
  19
  20         this.checkOffline();
  21         try {
  22             this.config =  await this.getConfig();
  23         } catch (error) {
  24             this.offline = true;
  25         }
  26
  27         // Look for a new message if an endpoint is provided.
  28         if (this.config.message.url) {
  29             this.getMessage(this.config.message.url).then(function(message){
  30                 // keep the original config value if no value is provided by the endpoint
  31                 for (const prop of ['title','style','content']) {
  32                     if (prop in message && message[prop] !== null) {
  33                         that.config.message[prop] = message[prop];
  34                     }
  35                 }
  36             });
  37         }
  38
  39         document.addEventListener('visibilitychange', function () {
  40             if (document.visibilityState == "visible") {
  41                 that.checkOffline();
  42             }
  43         }, false);
  44     },
  45     methods: {
  46         checkOffline: function () {
  47             let that = this;
  48             return fetch(window.location.href + "?alive", {
  49                 method: 'HEAD',
  50                 cache: 'no-store'
  51             }).then(function () {
  52                 that.offline = false;
  53             }).catch(function () {
  54                 that.offline = true;
  55             });
  56         },
  57         getConfig: function (event) {
  58             return fetch('config.yml').then(function (response) {
  59                 if (response.status != 200) {
  60                     return
  61                 }
  62                 return response.text().then(function (body) {
  63                     return jsyaml.load(body);
  64                 });
  65             });
  66         },
  67         getMessage: function (url) {
  68             return fetch(url).then(function (response) {
  69                 if (response.status != 200) {
  70                     return;
  71                 }
  72                 return response.json();
  73             });
  74         },
  75         toggleTheme: function() {
  76             this.isDark = !this.isDark;
  77             localStorage.overrideDark = this.isDark;
  78         },
  79         toggleLayout: function() {
  80             this.vlayout = !this.vlayout;
  81             localStorage.vlayout = this.vlayout;
  82         },
  83     }
  84 });
  85
  86 Vue.component('service', {
  87     props: ['item'],
  88     template: `<div>
  89     <div class="card">
  90         <a :href="item.url">
  91             <div class="card-content">
  92                 <div class="media">
  93                     <div v-if="item.logo" class="media-left">
  94                         <figure class="image is-48x48">
  95                             <img :src="item.logo" />
  96                         </figure>
  97                     </div>
  98                     <div v-if="item.icon" class="media-left">
  99                         <figure class="image is-48x48">
 100                             <i style="font-size: 35px" :class="item.icon"></i>
 101                         </figure>
 102                     </div>
 103                     <div class="media-content">
 104                         <p class="title is-4">{{ item.name }}</p>
 105                         <p class="subtitle is-6">{{ item.subtitle }}</p>
 106                     </div>
 107                 </div>
 108                 <div class="tag" :class="item.tagstyle" v-if="item.tag">
 109                     <strong class="tag-text">#{{ item.tag }}</strong>
 110                 </div>
 111             </div>
 112         </a>
 113     </div></div>`
 114 });
 115
 116 if ('serviceWorker' in navigator) {
 117     window.addEventListener('load', function () {
 118         navigator.serviceWorker.register('/worker.js');
 119     });
 120 }