new Vue({
    el: '#app',
    data: function() {
        return {
            loading: false,
            splash: false,
            services: {},
            addModalVisible: false,
            addModalHost: undefined,
            addModalPort: 8008,
        }
    },

    methods: {
        refresh: function() {
            this.services = {
                ...this.services,
                ...JSON.parse(app.pollServices()),
            }
        },

        onClick: function(service) {
            this.loadService(service.host, service.port)
        },

        onConnect: function() {
            this.loadService(this.addModalHost, this.addModalPort)
        },

        loadService: function(host, port) {
            this.loading = true
            app.stopServicesPoll()
            window.location.href = `http://${host}:${port}/`
        },

        splashScreen: function(duration) {
            var self = this
            this.splash = true
            window.setTimeout(() => {
                self.splash = false
            }, duration)
        },
    },

    mounted: function() {
        this.splashScreen(2500)
        app.startServicesPoll()
        window.setInterval(this.refresh, 500)
    }
})