justin/gropple
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 24 Wiki Activity

Update REST to allow config submission, form allowing editing of all values including the download profile commands and arguments. Neat.

Browse Source
This commit is contained in:
Justin Hawkins
2021-09-29 23:15:44 +09:30
parent 2aba19770f
commit 8b291f4629
4 changed files with 118 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
web/config.html
View File

@@ -5,6 +5,8 @@
<h2>gropple config</h2>
<p x-text="error_message"></p>
<p x-show="version && version.upgrade_available">
<a href="https://github.com/tardisx/gropple/releases">Upgrade is available</a> -
you have
@@ -21,7 +23,7 @@
<legend>Server</legend>
<label for="config-server-port">Listen Port</label>
<input type="text" id="config-server-port" placeholder="port number" x-model="config.server.port" />
<input type="text" id="config-server-port" placeholder="port number" x-model.number="config.server.port" />
<span class="pure-form-message">The port the web server will listen on.</span>
<label for="config-server-address">Server address (URL)</label>
@@ -38,11 +40,11 @@
<legend>UI</legend>
<label for="config-ui-popupwidth">Popup Width</label>
<input type="text" id="config-ui-popupwidth" placeholder="width in pixels" x-model="config.ui.popup_width" />
<input type="text" id="config-ui-popupwidth" placeholder="width in pixels" x-model.number="config.ui.popup_width" />
<span class="pure-form-message">The width of popup windows in pixels.</span>
<label for="config-ui-popupheight">Popup Height</label>
<input type="text" id="config-ui-popupheight" placeholder="height in pixels" x-model="config.ui.popup_height" />
<input type="text" id="config-ui-popupheight" placeholder="height in pixels" x-model.number="config.ui.popup_height" />
<span class="pure-form-message">The height of popup windows in pixels.</span>
</fieldset>
@@ -50,21 +52,49 @@
</div>
<div class="pure-u-md-1-2">
<form class="pure-form pure-form-stacked">
<form class="pure-form ">
<fieldset>
<legend>Download Profiles</legend>
<label for="config-profiles-0-name">Name of this profile</label>
<input type="text" id="config-profiles-0-name" placeholder="name" x-model="config.profiles[0].name" />
<span class="pure-form-message">The name of this profile. For your information only.</span>
<template x-for="(profile, i) in config.profiles">
<div>
<label x-bind:for="'config-profiles-'+i+'-name'">Name of profile <span x-text="i+1"></span></label>
<input type="text" x-bind:id="'config-profiles-'+i+'-name'" placeholder="name" x-model="profile.name" />
<span class="pure-form-message">The name of this profile. For your information only.</span>
<label x-bind:for="'config-profiles-'+i+'-command'">Command to run</label>
<input type="text" x-bind:id="'config-profiles-'+i+'-command'" placeholder="name" x-model="profile.command" />
<span class="pure-form-message">Which command to run.</span>
<label>Args</label>
<template x-for="(arg, j) in profile.args">
<div>
<input type="text" x-bind:id="'config-profiles-'+i+'-arg-'+j" placeholder="arg" x-model="profile.args[j]" />
<button class="pure-button" href="#" @click.prevent="profile.args.splice(j, 1);;">del</button>
</div>
</template>
<button class="pure-button" href="#" @click.prevent="profile.args.push('');">add arg</button>
<hr>
</div>
</template>
</fieldset>
</form>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<button class="pure-button" @click="save_config();" href="#">Save Config</button>
</div>
</div>
</div>
@@ -74,7 +104,10 @@
<script>
function config() {
return {
config: { server : {}, ui : {}, profiles: [{}] }, version: {},
config: { server : {}, ui : {}, profiles: [] },
version: {},
error_message: '',
fetch_config() {
fetch('/rest/config')
.then(response => response.json())
@@ -82,10 +115,32 @@
this.config = config;
})
.catch(error => {
console.log('failed to fetch version info - will retry');
setTimeout(() => { this.fetch_version() }, 1000 );
console.log('failed to fetch config', error);
});
},
save_config() {
console.log(this.config);
let op = {
method: 'POST',
body: JSON.stringify(this.config),
headers: { 'Content-Type': 'application/json' }
}
fetch('/rest/config', op)
.then(response => {
if (response.status >= 200 && response.status <= 299) {
return response.json();
} else {
throw Error(response);
}})
.then(config => {
console.log('fixing object');
this.config = config;
})
.catch(error => {
this.error_message = error.error;
console.log('failed to update config', error);
});
}
}
}
</script>