|
|
@@ -12,138 +12,68 @@
|
|
|
background-color: aquamarine;
|
|
|
padding: 2em;
|
|
|
}
|
|
|
+
|
|
|
.descriptor {
|
|
|
display: inline-block;
|
|
|
width: 5em;
|
|
|
}
|
|
|
+
|
|
|
.log {
|
|
|
font-size: 0.8em;
|
|
|
line-height: 1em;
|
|
|
background-color: aliceblue;
|
|
|
padding: 1em;
|
|
|
}
|
|
|
+
|
|
|
.json-tree-value-number {
|
|
|
color: red;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<div id="app">
|
|
|
-
|
|
|
- <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
|
|
- <header class="mdl-layout__header">
|
|
|
- <div class="mdl-layout__header-row">
|
|
|
- <!-- Title -->
|
|
|
- <span class="mdl-layout-title">
|
|
|
- {{config.appname}}
|
|
|
- </span>
|
|
|
- <div class="mdl-layout-spacer"></div>
|
|
|
-
|
|
|
-
|
|
|
- <!-- Add spacer, to align navigation to the right -->
|
|
|
- <div class="mdl-layout-spacer"></div>
|
|
|
- <!-- Navigation. We hide it in small screens. -->
|
|
|
- <nav class="mdl-navigation mdl-layout--large-screen-only">
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
- <div class="mdl-layout__drawer">
|
|
|
- <span class="mdl-layout-title">Title</span>
|
|
|
- <nav class="mdl-navigation">
|
|
|
- </nav>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- <main class="mdl-layout__content">
|
|
|
- <div class="page-content">
|
|
|
-
|
|
|
- <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
|
|
|
- <div class="mdl-tabs__tab-bar">
|
|
|
- <a href="#updates" class="mdl-tabs__tab is-active">updates</a>
|
|
|
- <a href="#summary" class="mdl-tabs__tab">summary</a>
|
|
|
- <a href="#debug" class="mdl-tabs__tab">debug</a>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="mdl-tabs__panel is-active" id="updates">
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div class="entry">
|
|
|
-
|
|
|
- <template v-for="studio in config.studios">
|
|
|
- <template v-for="member in studio">
|
|
|
- <div>
|
|
|
- <span style="width: 10em; display: inline-block">
|
|
|
- {{member.name}}
|
|
|
- </span>
|
|
|
- <textarea cols="50" rows="5" v-model="member.task" placeholder="Enter updates"></textarea>
|
|
|
-
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="mdl-tabs__panel" id="summary">
|
|
|
- <div class="entry">
|
|
|
- <span class="descriptor">Episode</span>
|
|
|
- <input type="number" v-model="config.released_episode">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="mdl-tabs__panel" id="debug">
|
|
|
- <pre>
|
|
|
- {{config.studios}}
|
|
|
- </pre>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
+ <button onclick="store.setter(app.config)">save</button>
|
|
|
+ <button onclick="store.getter()">load</button>
|
|
|
+ <pre>
|
|
|
+ {{config}}
|
|
|
+ </pre>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
|
<script>
|
|
|
-var app = '';
|
|
|
-
|
|
|
-var store = {
|
|
|
- server_url: "http://localhost:8000",
|
|
|
- target: app.config,
|
|
|
- setter: function (o) {
|
|
|
- xhr = new XMLHttpRequest();
|
|
|
- xhr.open('GET', this.server_url + '/set/' + encodeURIComponent(JSON.stringify(o)));
|
|
|
- xhr.onload = function () {console.log(xhr.responseText);};
|
|
|
- xhr.send();
|
|
|
- },
|
|
|
- getter: function () {
|
|
|
- xhr = new XMLHttpRequest();
|
|
|
- xhr.open('GET', this.server_url + '/get');
|
|
|
- xhr.onload = function () {
|
|
|
- var decodedResponse = this.responseText;
|
|
|
- console.log(decodedResponse);
|
|
|
- try {
|
|
|
- var response = JSON.parse(decodedResponse);
|
|
|
- app.config = response;
|
|
|
- }
|
|
|
- catch(err) {
|
|
|
- console.warn("json could not be parsed:", this.responseText);
|
|
|
- }
|
|
|
- // return response;
|
|
|
- };
|
|
|
- xhr.send();
|
|
|
- },
|
|
|
-};
|
|
|
+ var app = '';
|
|
|
+
|
|
|
+ var store = {
|
|
|
+ server_url: "http://localhost:8000",
|
|
|
+ target: app.config,
|
|
|
+ setter: function (o) {
|
|
|
+ xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('GET', this.server_url + '/set/' + encodeURIComponent(JSON.stringify(o)));
|
|
|
+ xhr.onload = function () {
|
|
|
+ console.log(xhr.responseText);
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
+ },
|
|
|
+ getter: function () {
|
|
|
+ xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('GET', this.server_url + '/get');
|
|
|
+ xhr.onload = function () {
|
|
|
+ var decodedResponse = this.responseText;
|
|
|
+ console.log(decodedResponse);
|
|
|
+ try {
|
|
|
+ var response = JSON.parse(decodedResponse);
|
|
|
+ app.config = response;
|
|
|
+ } catch (err) {
|
|
|
+ console.warn("json could not be parsed:", this.responseText);
|
|
|
+ }
|
|
|
+ // return response;
|
|
|
+ };
|
|
|
+ xhr.send();
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
|
|
|
-var app = new Vue({
|
|
|
+ var app = new Vue({
|
|
|
el: '#app',
|
|
|
data: {
|
|
|
config: {
|
|
|
@@ -160,11 +90,6 @@ var app = new Vue({
|
|
|
test: function () {},
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
|
|