PyCS/webui/src/main.js

// import global styles
import './assets/style/main.css'
import './assets/style/colors.css'
import './assets/style/fonts.css'

// imports
import Vue from 'vue'
import App from './App.vue'
import io from "socket.io-client";

// establish socket connection
const self = window.location.protocol + '//' + window.location.hostname + ':5000';
const sio = io(self);

// initialize vue.js
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    created: function () {
        this.socket.on('edit-project', project => {
            if (this.project && this.project.identifier === project.identifier) {
                this.project = project;
            }
        });
        this.socket.on('remove-project', project => {
            if (this.project && this.project.identifier === project.identifier) {
                this.project = null;
            }
        });

        this.socket.on('connect', () => this.connected = true);
        setInterval(() => this.connected = sio.connected, 1000);
    },
    data: function () {
        return {
            project: null,
            connected: false,
            socket: {
                url: function (name) {
                    if (name.startsWith('http'))
                        return name;
                    else
                        return self + name;
                },
                on: function (name, callback) {
                    console.log('on', name);
                    sio.on(name, callback);
                },
                off: function (name, callback) {
                    console.log('off', name);
                    sio.off(name, callback);
                },
                get: function (name) {
                    name = this.url(name);
                    console.log('get', name);
                    return fetch(name, {
                        method: 'GET'
                    });
                },
                post: function (name, value) {
                    name = this.url(name);
                    console.log('post', name, value);
                    return fetch(name, {
                        method: 'POST',
                        body: JSON.stringify(value)
                    });
                },
                upload: function (name, file) {
                    name = this.url(name);
                    const form = new FormData();
                    form.append('file', file);

                    console.log('upload', name, file);
                    return fetch(name, {
                        method: 'POST',
                        body: form
                    });
                },
                media: function (file, maxWidth, maxHeight) {
                    if (maxHeight)
                        return `${self}/data/${file.identifier}/${maxWidth}x${maxHeight}?uuid=${file.uuid}`
                    else if (maxWidth)
                        return `${self}/data/${file.identifier}/${maxWidth}?uuid=${file.uuid}`
                    else
                        return `${self}/data/${file.identifier}?uuid=${file.uuid}`
                }
            }
        }
    }
}).$mount('#app')