204 lines
9.8 KiB
HTML
204 lines
9.8 KiB
HTML
{{ define "content" }}
|
|
|
|
{{ template "menu.tmpl" . }}
|
|
|
|
<div x-data="config()" x-init="fetch_config();">
|
|
|
|
<p class="error" x-show="error_message" x-transition.duration.500ms x-text="error_message"></p>
|
|
<p class="success" x-show="success_message" x-transition.duration.500ms x-text="success_message"></p>
|
|
|
|
<p>Note: changes are not saved until the "Save Config" button is pressed.</p>
|
|
|
|
<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 class="pure-g">
|
|
|
|
<div class="pure-u-lg-1-3 pure-u-1 l-box">
|
|
|
|
<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>
|
|
|
|
<label for="config-server-max-downloads">Maximum active downloads per domain</label>
|
|
<input type="text" id="config-server-max-downloads" placeholder="2" class="input-long" x-model.number="config.server.maximum_active_downloads_per_domain" />
|
|
<span class="pure-form-message">How many downloads can be simultaneously active. Use '0' for no limit. This limit is applied per domain that you download from.</span>
|
|
|
|
<legend>UI</legend>
|
|
|
|
<p>Note that changes to the popup dimensions will require you to recreate your bookmarklet.</p>
|
|
|
|
<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-lg-1-3 pure-u-1 l-box">
|
|
<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>
|
|
|
|
<hr>
|
|
|
|
<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" />
|
|
<button class="pure-button button-del" href="#" @click.prevent="config.profiles.splice(i, 1);;">delete profile</button>
|
|
|
|
<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);;">delete arg</button>
|
|
</div>
|
|
</template>
|
|
|
|
<button class="pure-button button-add" href="#" @click.prevent="profile.args.push('');">add arg</button>
|
|
<span class="pure-form-message">Arguments for the command. Note that the shell is not used, so there is no need to quote or escape arguments, including those with spaces.</span>
|
|
|
|
<hr>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<button class="pure-button button-add" href="#" @click.prevent="config.profiles.push({name: 'new profile', command: 'youtube-dl', args: []});">add profile</button>
|
|
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="pure-u-lg-1-3 pure-u-1 l-box">
|
|
<form class="pure-form gropple-config">
|
|
<fieldset>
|
|
<legend>Destinations</legend>
|
|
<p>You can specify custom destinations (directories) here. Downloads can be
|
|
moved to one of these directories after completion from the index page,
|
|
if you do not want them to be left in the download path above.</p>
|
|
</p>
|
|
<template x-for="(dest, i) in config.destinations">
|
|
<div>
|
|
<label x-bind:for="'config-destinations-'+i+'-name'">Name of destination <span x-text="i+1"></span>
|
|
</label>
|
|
|
|
<input type="text" x-bind:id="'config-destinations-'+i+'-name'" class="input-long" placeholder="name" x-model="dest.name" />
|
|
|
|
<span class="pure-form-message">The name of this destination. For your information only.</span>
|
|
|
|
<label x-bind:for="'config-destinations-'+i+'-command'">Path</label>
|
|
<input type="text" x-bind:id="'config-destinations-'+i+'-command'" class="input-long" placeholder="name" x-model="dest.path" />
|
|
<span class="pure-form-message">Path to move completed downloads to.</span>
|
|
|
|
<button class="pure-button button-del" href="#" @click.prevent="config.destinations.splice(i, 1);">delete destination</button>
|
|
|
|
<hr>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<button class="pure-button button-add" href="#" @click.prevent="config.destinations.push({name: 'new destination', path: '/tmp'});">add destination</button>
|
|
|
|
</fieldset>
|
|
</form>
|
|
</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: [], destinations: []},
|
|
error_message: '',
|
|
success_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() {
|
|
let op = {
|
|
method: 'POST',
|
|
body: JSON.stringify(this.config),
|
|
headers: { 'Content-Type': 'application/json' }
|
|
};
|
|
fetch('/rest/config', op)
|
|
.then(response => {
|
|
return response.json();
|
|
})
|
|
.then(response => {
|
|
if (response.error) {
|
|
this.error_message = response.error;
|
|
this.success_message = '';
|
|
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
|
} else {
|
|
this.error_message = '';
|
|
this.success_message = 'configuration saved';
|
|
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
|
this.config = response;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('exception' ,error);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{{ end }} |