index.html

<?php Tag::css('jardin') ?>
<?= Html::includeCss() ?>

<pre>
<?php View::content() ?>
</pre>

<?php foreach($j->getIdiomas() as $i): ?>
<?php echo $i->lang ?>
<?php endforeach; ?>

<div id="app_jardin">
    <h1>Jardin</h1>
    <img @click="set_alarma" width="64px" v-bind:src="'/kumbiaphpiot/banderas/alarma_' + jardin.status_alarma + '.png'">
    {{ jardin.status_alarma }}
    <div id="jardin">
        <div id="intruso"></div>
    </div>
    <div>
        <div v-for="i in idiomas">
            <img @click="set_idioma(i.lang)" width="40px" style="float: left; margin-left: 5px" 
                  v-bind:src="'/kumbiaphpiot/banderas/' + i.lang + '.jpg'">
        </div>
    </div>

    <button type="button" @click="play">Play</button>

</div>

<script>
    var app_jardin = new Vue({
        el: '#app_jardin',
        data: {
            xy: {},
            x: 0,
            y: 0,
            idiomas: {},
            jardin: {
                status_alarma: 0
            },
            actualizo_alarma: true
        },
        methods: {
            // Solita las coordenadas
            get_xy: function () {
                este = this;
                axios.get('/kumbiaphpiot/jardin/get_xy/5d9bd7c87910c8b10d9ee653').then(function (response) {
                    
                    alarma =  este.jardin.status_alarma;
                    este.jardin = response.data;
                    
                    if(!este.actualizo_alarma){
                        este.jardin.status_alarma = alarma;
                    }
                    
                    este.x = response.data.intruso.x;
                    este.y = response.data.intruso.y;
                    // cada cierto tiempo se manda llamar a si mism 
                    document.getElementById("intruso").style.marginLeft = este.x + "px";
                    document.getElementById("intruso").style.marginTop = este.y + "px";
                    setTimeout(function () {
                        app_jardin.get_xy();
                    }, 1000);
                });
            },
            get_idiomas: function () {
                este = this;
                axios.get('/kumbiaphpiot/jardin/get_idiomas').then(function (response) {
                    console.info(response.data);
                    este.idiomas = response.data;
                });
            },
            set_idioma: function (lang) {
                this.jardin.lang = lang;
                axios.patch('/kumbiaphpiot/jardin/set_lang/5d9bd7c87910c8b10d9ee653/' + lang).then(function (response) {
                    console.info(response.data);
                });
            },

            set_alarma: function () {
                // console.info(this.jardin.status_alarma);
                este = this;
                este.actualizo_alarma = false;

                status = (this.jardin.status_alarma === 1) ? 0 : 1;

                este.jardin.status_alarma = 2;
                axios.patch('/kumbiaphpiot/jardin/set_alarma/5d9bd7c87910c8b10d9ee653/' + status).then(function (response) {
                    este.jardin.status_alarma = status;
                    este.actualizo_alarma = true;
                });

            },
            play: function(){
                var snd = new Audio("/kumbiaphpiot/audios/es.mp3"); // buffers automatically when created
                snd.play();
            }
        },
        mounted: function () {
            this.get_xy();
            this.get_idiomas();
        }
    });
</script> t_idio