Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="wolke.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script type="text/javascript" src="wolke.js"></script>
</head>

<body ng-app="App" ng-controller="world">
    <table>
        <tr ng-repeat="item in VALUES">
            <td>
                {{item.name}}
            </td>
            <td>
                <input
                    ng-model="item.write"
                    type="text"
                    ng-keyup="$event.keyCode == 13 &&
                        (send(item.name + '_value', item.write) ||
                        $event.target.blur())" />
            </td>
            <td>
                {{item.read}}
            </td>
            <td>
                <input
                    ng-value="item.active ? 'On' : 'Off'"
                    ng-style="{'background-color': item.active ? 'var(--green)' : 'var(--red)'}"
                    type="button"
                    ng-click="send(item.name + '_toggle', '')" />
            </td>
        </tr>
    </table>

    <table ng-hide="LOGIN_SUCCESS">
        <tr>
            <td>
                Username:
            </td>
            <td>
                <input
                    ng-model="username"
                    type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Password:
            </td>
            <td>
                <input
                    ng-model="password"
                    type="password"
                    ng-keyup="$event.keyCode == 13 && login()" />
            </td>
        </tr>
    </table>
</body>

'use strict';
if(typeof console === undefined) {console = {log: function() {}}}

var PARTICLE = {
    deviceId: 'Stern',
    status: 'status',
    token: null,
    api_url: [
        'particle.js',
        'https://cdn.jsdelivr.net/npm/particle-api-js@7/dist/particle.min.js',
    ]
};

angular.module('App', []).controller('world', function ($scope) {
    $scope.LOGIN_SUCCESS = true;

    $scope.send = function(name, value) {
        PARTICLE.api.callFunction({
            deviceId: PARTICLE.deviceId,
            name: name,
            auth: PARTICLE.token,
            argument: value,
        }).then(
            msg => console.log('Function call success ', msg),
            err => console.log('Function call failure: ', err)
        );
    }

    $scope.login = function() {
        PARTICLE.api.login({
            username: $scope.username,
            password: $scope.password
        }).then(data => {
            PARTICLE.token = data.body.access_token;
            localStorage.setItem('token', PARTICLE.token);
            $scope.LOGIN_SUCCESS = true;
            $scope.read();
        }, err => console.log('Login failure ', err));
    }

    $scope.read = function() {
        PARTICLE.api.getVariable({
            deviceId: PARTICLE.deviceId,
            name: PARTICLE.status,
            auth: PARTICLE.token,
        }).then(response => {
            let raw = JSON.parse(response.body.result);

            if ($scope.VALUES === undefined) {
                raw.forEach(item => item.write = item.read);
                $scope.VALUES = raw;
            } else {
                raw.forEach((item, i) => {
                    $scope.VALUES[i].read = item.read;
                    $scope.VALUES[i].active = item.active;
                });
            }

            $scope.$apply();
            setTimeout($scope.read, 10);
        }, err => {
            console.log('Read error from: ', err);
            $scope.LOGIN_SUCCESS = false;
        });
    }

    $scope.setup = function() {
        PARTICLE.token = localStorage.getItem('token');
        console.log('Restored token = ' + PARTICLE.token);
        $scope.read();
    }

    load_particle_api(location.href).then($scope.setup);
});


function load_particle_api(url) {
    // Allows to load fake particle api for debug purposes
    return new Promise(resolve => {
        let load = () => {
            PARTICLE.api = new Particle;
            resolve();
        };

        let script = document.createElement('script');
        script.src = PARTICLE.api_url[url.indexOf('?') == -1 | 0];
        script.onload = () => load();
        script.onreadystatechange = () => load();
        document.head.appendChild(script);
    });
}

:root {
/* Taken from http://ethanschoonover.com/solarized */
    --background:   #002b36;
    --edit:         #586e75;
    --edit_focus:   #839496;
    --color:        #fdf6e3;
    --red:          #dc322f;
    --green:        #859900;
}

* {
    background-color: var(--background);
    color: var(--color);
    font-size: 16pt;
    font-family: sans-serif;
    text-align: center;
    padding: 0 0 0 0;
}

td {
    width: 25%;
}

input:focus {
    border: none;
    outline: none;
    background-color: var(--edit_focus);
}

input {
    background-color: var(--edit);
    border: none;
    width: 100%;
    height: 23px;
}

'use strict'

class Particle {
    constructor() {
        this.value = [
            {name: 'int', active: 1, read: 100},
            {name: 'str', active: 0, read: 'abc'},
        ];
    }

    getVariable(arg) {
        return new Promise(resolve => {
            resolve({body:
                {result: JSON.stringify(this.value)}
            });
        });
    }

    callFunction(arg) {
        return new Promise(resolve => {
            console.log('Received = ', arg)

            let name_parts = arg.name.split('_');
            let index = name_parts[0] === 'str' | 0;

            if (name_parts[1] == 'toggle') {
                this.value[index].active ^= true;
            } else {
                this.value[index].read = arg.argument;
            }

            resolve('ok');
        });
    }
}