diff options
| author | ngharo <nick@ngha.ro> | 2017-12-29 00:02:05 -0600 |
|---|---|---|
| committer | ngharo <nick@ngha.ro> | 2017-12-29 00:02:05 -0600 |
| commit | 75d05326d067857d22474cc91d069003d7b64b17 (patch) | |
| tree | 150958928ea0d3f129b55d3694227b3344adf978 /www/index.htm | |
| parent | 67c7dbdd19afcc17816e43ff66873e76101704a5 (diff) | |
| download | imOk-www-75d05326d067857d22474cc91d069003d7b64b17.tar.xz imOk-www-75d05326d067857d22474cc91d069003d7b64b17.zip | |
VueJS front-end work in progress
Diffstat (limited to 'www/index.htm')
| -rw-r--r-- | www/index.htm | 46 |
1 files changed, 43 insertions, 3 deletions
diff --git a/www/index.htm b/www/index.htm index 9ba7132..447c6dd 100644 --- a/www/index.htm +++ b/www/index.htm @@ -1,13 +1,53 @@ <!doctype html> <html> <head> - <link href="s.css" type="text/css"/> + <meta charset="utf-8"> + <link rel="stylesheet" href="css/normalize.css"> + <link rel="stylesheet" href="css/skeleton.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" /> + <link rel="stylesheet" href="imok.css"> + <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="container"> + <div class="row"> + <div class="two-thirds column"> + <h1>Buttons</h1> + </div> + <div class="one-third column"> + <button id="create" class="button-primary" v-on:click="create">create</button> + </div> + </div> - </div> + <table class="u-full-width"> + <thead> + <tr> + <th>id</th> + <th>status</th> + <th>last pressed</th> + </tr> + </thead> + <tbody> + <tr v-if="!ready"> + <td colspan="3"><i class="fa fa-spinner fa-spin"></i> + </tr> - <script src="app.js"></script> + <tr v-for="(button, index) in buttons" v-show="ready"> + <td>{{ button.id }} <button v-on:click="remove(index)">delete</button></td> + <td> + <select v-model="button.status" v-on:change="update(index)"> + <option value="0">Inventory</option> + <option value="1">Active</option> + <option>2</option> + <option>3</option> + <option>4</option> + </select> + </td> + <td>{{ button.last_pressed }}</td> + </tr> + </tbody> + </table> + </div> + <script src="imok.js"></script> </body> </html> |