152 lines
6.4 KiB
HTML
152 lines
6.4 KiB
HTML
{{ define "content" }}
|
|
|
|
|
|
<div x-data="config()" x-init="fetch_config();">
|
|
|
|
<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
|
|
<span x-text="version.current_version"></span> and
|
|
<span x-text="version.github_version"></span>
|
|
is available.</p>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-md-1-2 pure-u-1">
|
|
|
|
<form class="pure-form pure-form-stacked gropple-config">
|
|
<fieldset>
|
|
|
|
<legend>Server</legend>
|
|
|
|
<label for="config-server-port">Listen Port</label>
|
|
<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>
|
|
<input type="text" id="config-server-address" class="input-long" placeholder="server address" x-model="config.server.address" />
|
|
<span class="pure-form-message">
|
|
The address the service will be available on. Generally it will be http://hostname:port where
|
|
hostname is the host the server is running on, and port is the port you set above.
|
|
</span>
|
|
|
|
<label for="config-server-downloadpath">Download path</label>
|
|
<input type="text" id="config-server-downloadpath" placeholder="path" class="input-long" x-model="config.server.download_path" />
|
|
<span class="pure-form-message">The path on the server to download files to.</span>
|
|
|
|
<legend>UI</legend>
|
|
|
|
<label for="config-ui-popupwidth">Popup Width</label>
|
|
<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.number="config.ui.popup_height" />
|
|
<span class="pure-form-message">The height of popup windows in pixels.</span>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="pure-u-md-1-2 pure-u-1">
|
|
<form class="pure-form gropple-config">
|
|
<fieldset>
|
|
|
|
<legend>Download Profiles</legend>
|
|
|
|
<p>Gropple supports multiple download profiles. Each profile specifies a different youtube-dl
|
|
compatible command, and arguments. When starting a download, you may choose which profile
|
|
to use. The URL will be appended to the argument list at the end.
|
|
</p>
|
|
|
|
<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'" class="input-long" 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'" class="input-long" placeholder="name" x-model="profile.command" />
|
|
<span class="pure-form-message">Which command to run. Your path will be searched, or you can specify the full path here.</span>
|
|
|
|
|
|
<label>Arguments</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 button-del" href="#" @click.prevent="profile.args.splice(j, 1);;">del</button>
|
|
</div>
|
|
</template>
|
|
|
|
<button class="pure-button button-add" 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 pure-button-primary" @click="save_config();" href="#">Save Config</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
{{ define "js" }}
|
|
<script>
|
|
function config() {
|
|
return {
|
|
config: { server : {}, ui : {}, profiles: [] },
|
|
version: {},
|
|
error_message: '',
|
|
|
|
fetch_config() {
|
|
fetch('/rest/config')
|
|
.then(response => response.json())
|
|
.then(config => {
|
|
this.config = config;
|
|
})
|
|
.catch(error => {
|
|
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>
|
|
{{ end }} |