work on logs, timetable, stats

assets/public/app.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+
+
+export var app = null;
+export default app;
+
+function loadApp() {
+    app = new Vue({
+      el: '#app',
+      delimiters: [ '[[', ']]' ],
+    })
+}
+
+window.addEventListener('load', loadApp);
+
+
+

assets/public/index.js

@@ -0,0 +1,28 @@
+/**
+ * This module includes code available for both the public website and
+ * administration interface)
+ */
+//-- vendor
+import Vue from 'vue';
+
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
+import 'buefy/dist/buefy.css';
+
+
+//-- aircox
+import app from './app';
+import LiveInfo from './liveInfo';
+
+import './styles.scss';
+
+import Player from './player.vue';
+
+Vue.component('a-player', Player)
+
+
+window.aircox = {
+    app: app,
+    LiveInfo: LiveInfo,
+}
+

assets/public/liveInfo.js

@@ -0,0 +1,37 @@
+
+export default class {
+    constructor(url, timeout) {
+        this.url = url;
+        this.timeout = timeout;
+        this.promise = null;
+        this.items = [];
+    }
+
+    drop() {
+        this.promise = null;
+    }
+
+    fetch() {
+        const promise = fetch(this.url).then(response =>
+            response.ok ? response.json()
+                        : Promise.reject(response)
+        ).then(data => {
+            this.items = data;
+            return this.items
+        })
+
+        this.promise = promise;
+        return promise;
+    }
+
+    refresh() {
+        const promise = this.fetch();
+        promise.then(data => {
+            if(promise != this.promise)
+                return [];
+
+            window.setTimeout(() => this.refresh(), this.timeout*1000)
+        })
+        return promise
+    }
+}

assets/public/player.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="media">
+        <div class="media-left">
+            <div class="button" @click="toggle()"
+                    :title="buttonTitle" :aria-label="buttonTitle">
+                <span class="fas fa-pause" v-if="playing"></span>
+                <span class="fas fa-play" v-else></span>
+            </div>
+            <audio ref="audio" @playing="onChange" @ended="onChange" @pause="onChange">
+                <slot name="sources"></slot>
+            </audio>
+        </div>
+        <div class="media-left media-cover" v-if="onAir && onAir.cover">
+            <img :src="onAir.cover" class="cover" />
+        </div>
+        <div class="media-content" v-if="onAir && onAir.type == 'track'">
+            <slot name="track" :onAir="onAir" :liveInfo="liveInfo"></slot>
+        </div>
+        <div class="media-content" v-else-if="onAir && onAir.type == 'diffusion'">
+            <slot name="diffusion" :onAir="onAir" :liveInfo="liveInfo"></slot>
+        </div>
+        <div class="media-content" v-else><slot name="empty"></slot></div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import LiveInfo from './liveInfo';
+
+export const State = {
+    paused: 0,
+    playing: 1,
+    loading: 2,
+}
+
+export default {
+    data() {
+        return {
+            state: State.paused,
+            liveInfo: new LiveInfo(this.liveInfoUrl, this.liveInfoTimeout),
+        }
+    },
+
+    props: {
+        buttonTitle: String,
+        liveInfoUrl: String,
+        liveInfoTimeout: { type: Number, default: 5},
+        src: String,
+    },
+
+    computed: {
+        paused() { return this.state == State.paused; },
+        playing() { return this.state == State.playing; },
+        loading() { return this.state == State.loading; },
+
+        onAir() {
+            return this.liveInfo.items && this.liveInfo.items[0];
+        },
+
+        buttonStyle() {
+            if(!this.onAir)
+                return;
+            return { backgroundImage: `url(${this.onAir.cover})` }
+        }
+    },
+
+    methods: {
+        load(src) {
+            const audio = this.$refs.audio;
+            audio.src = src;
+            audio.load()
+        },
+
+        play(src) {
+            if(src)
+                this.load(src);
+            this.$refs.audio.play().catch(e => console.error(e))
+        },
+
+        pause() {
+            this.$refs.audio.pause()
+        },
+
+        toggle() {
+            if(this.paused)
+                this.play()
+            else
+                this.pause()
+        },
+
+        onChange(event) {
+            const audio = this.$refs.audio;
+            this.state = audio.paused ? State.paused : State.playing;
+        },
+    },
+
+    mounted() {
+        this.liveInfo.refresh()
+    },
+
+    destroyed() {
+        this.liveInfo.drop()
+    },
+}
+
+</script>
+
+
+
+

assets/public/styles.scss

@@ -0,0 +1,135 @@
+@charset "utf-8";
+@import "~bulma/sass/utilities/_all.sass";
+
+$body-background-color: $light;
+
+@import "~bulma/bulma";
+
+.is-fullwidth { width: 100%; }
+.is-fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    margin-bottom: 0px;
+    border-radius: 0;
+}
+.is-borderless { border: none; }
+
+.has-background-transparent {
+    background-color: transparent;
+}
+
+.navbar + .container {
+    margin-top: 1em;
+}
+
+.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
+    box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
+}
+
+a.navbar-item.is-active {
+    border-bottom: 1px grey solid;
+}
+
+.navbar .navbar-dropdown {
+    z-index: 2000;
+}
+
+/*
+.navbar-brand img {
+    min-height: 6em;
+}
+
+.navbar-menu .navbar-item:not(:last-child) {
+    border-right: 1px $grey solid;
+}
+*/
+
+
+/** page **/
+.page {
+    & > .cover {
+        float: right;
+        max-width: 45%;
+    }
+
+    .header {
+        margin-bottom: 1.5em;
+    }
+
+    .headline {
+        font-size: 1.4em;
+        padding: 0.2em 0em;
+    }
+
+    p {
+        padding: 0.4em 0em;
+    }
+}
+
+section > .toolbar {
+    background-color: rgba(0,0,0,0.05);
+    padding: 1em;
+    margin-bottom: 1.5em;
+}
+
+
+main {
+    .cover {
+        margin: 1em 0em;
+        border: 0.2em black solid;
+    }
+
+    .small-cover {
+        width: 10em;
+    }
+}
+
+aside {
+    .small-cover {
+        width: 4em;
+    }
+
+    .media .subtitle {
+        font-size: 1em;
+    }
+
+    .media .content {
+        display: none;
+    }
+}
+
+
+.player {
+    box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
+
+    .media-left:not(:last-child) {
+        margin-right: 0em;
+    }
+
+    .media-cover {
+        border-left: 1px black solid;
+    }
+
+    .cover {
+        font-size: 1.5rem !important;
+        height: 2.5em !important;
+    }
+
+    .media-content {
+        padding-top: 0.4em;
+        padding-left: 0.4em;
+    }
+
+    .button {
+        font-size: 1.5rem !important;
+        height: 2.5em;
+        min-width: 2.5em;
+    }
+
+    .title {
+        margin: 0em;
+    }
+
+}
+
+