app.js

   1 const app = new Vue({
   2     el: '#app',
   3     data: {
   4         config: null,
   5         offline: false,
   6         filter: '',
   7         vlayout: true
   8     },
   9     created: function () {
  10         let that = this;
  11
  12         this.checkOffline();
  13         that.getConfig().then(function (config) {
  14             that.config = config;
  15         }).catch(function () {
  16             that.offline = true;
  17         });
  18
  19         document.addEventListener('visibilitychange', function () {
  20             if (document.visibilityState == "visible") {
  21                 that.checkOffline();
  22             }
  23         }, false);
  24     },
  25     methods: {
  26         checkOffline: function () {
  27             let that = this;
  28             return fetch(window.location.href + "?alive", {
  29                 method: 'HEAD',
  30                 cache: 'no-store'
  31             }).then(function () {
  32                 that.offline = false;
  33             }).catch(function () {
  34                 that.offline = true;
  35             });
  36         },
  37         getConfig: function (event) {
  38             return fetch('config.yml').then(function (response) {
  39                 if (response.status != 200) {
  40                     return
  41                 }
  42                 return response.text().then(function (body) {
  43                     return jsyaml.load(body);
  44                 });
  45             });
  46         },
  47     }
  48 });
  49
  50 Vue.component('service', {
  51     props: ['item'],
  52     template: `<div>
  53     <div class="card">
  54         <a :href="item.url">
  55             <div class="card-content">
  56                 <div class="media">
  57                     <div v-if="item.logo" class="media-left">
  58                         <figure class="image is-48x48">
  59                             <img :src="item.logo" />
  60                         </figure>
  61                     </div>
  62                     <div v-if="item.icon" class="media-left">
  63                         <figure class="image is-48x48">
  64                             <i style="font-size: 35px" :class="item.icon"></i>
  65                         </figure>
  66                     </div>
  67                     <div class="media-content">
  68                         <p class="title is-4">{{ item.name }}</p>
  69                         <p class="subtitle is-6">{{ item.subtitle }}</p>
  70                     </div>
  71                 </div>
  72                 <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
  73             </div>
  74         </a>
  75     </div></div>`
  76 });
  77
  78 if ('serviceWorker' in navigator) {
  79     window.addEventListener('load', function () {
  80         navigator.serviceWorker.register('/worker.js');
  81     });
  82 }