<!DOCTYPE html>
<html lang="en">
<head>
	<title>Platypush</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript" src="../assets/js/vue.min.js"></script>
	<script type="text/javascript" src="../assets/js/androidjs.js"></script>
    <link rel="stylesheet" href="../assets/css/style.css">
</head>

<body>
    <div id="app">
        <div class="services">
            <div class="no-items" v-if="loading || !Object.keys(services).length">
                <div class="loading" v-if="loading">Loading...</div>
                <div class="empty" v-else>No Platypush web services found on the network</div>
            </div>

            <div class="service" v-for="service in services" :key="service.fqdn" @click="onClick(service)">
                <span class="name" v-text="service.name"></span>
                on
                <span class="address" v-text="service.addresses[0]"></span>:<span class="port" v-text="service.port"></span>
            </div>
        </div>

        <div class="add-modal-container" @click="addModalVisible = false" v-if="addModalVisible">
            <div class="add-modal-background"></div>
            <div class="add-modal" @click="$event.stopPropagation()">
                <div class="header">
                    Connect to a Platypush web service
                </div>

                <div class="body">
                    <form @submit.prevent="onConnect">
                        <label>
                            <input type="text" placeholder="IP or hostname" v-model="addModalHost">
                        </label>

                        <label>
                            <input type="number" placeholder="Port" v-model="addModalPort">
                        </label>

                        <input type="submit" value="Connect">
                    </form>
                </div>
            </div>
        </div>

        <div class="add-btn" @click="addModalVisible = true"></div>
    </div>

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

            methods: {
                refresh: function() {
                    front.send('get-services')
                },

                onClick: function(service) {
                    window.location.href = `http://${service.addresses[0]}:${service.port}/`
                },

                onConnect: function() {
                    window.location.href = `http://${this.addModalHost}:${this.addModalPort}/`
                },
            },

            mounted: function() {
                const self = this
                this.loading = true

                front.on('services', function(service) {
                    self.loading = false
                    Vue.set(self.services, service.fqdn, service)
                })

                this.refresh()
                window.setInterval(this.refresh, 5000)
                window.setTimeout(() => self.loading = false, 10000)
            }
        })
    </script>
</body>
</html>

