Files
Anthias/templates/settings.html
Viktor Petersson 5d930ae6b4 Minor UI tweaks
2023-02-07 09:40:33 +00:00

470 lines
28 KiB
HTML

{% extends "base.html" %}
{% block head %}
<script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script> <!-- needs jquery -->
<script src="{{ url_for('static', filename='js/jquery-ui-1.10.1.custom.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.fileupload.js') }}"></script> <!-- needs jqueryui.widget -->
<script src="{{ url_for('static', filename='js/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %}
{% block content %}
<div class="container">
<div class="row py-2">
<div class="col-12">
<h4 class="page-header text-white">
<b>Settings</b>
</h4>
</div>
</div>
<div class="row content px-3">
<div class="col-12 my-3">
{% if context.flash %}
<div class="alert alert-{{ context.flash['class'] }}">
{{ context.flash['message'] }}
</div>
{% endif %}
<form method="post" class="row">
<div class="form-group col-6 d-flex flex-column justify-content-between">
<div class="form-group">
<label class="small text-secondary">Player name</label>
<input class="form-control" name="player_name" type="text"
value="{{ context.player_name }}">
</div>
<div class="row">
<div class="form-group col-6">
<label class="small text-secondary">Default duration</label>
<input class="form-control" name="default_duration" type="number"
value="{{ context.default_duration }}"/>
</div>
<div class="form-group col-6">
<label class="small text-secondary">Default streaming duration</label>
<input class="form-control" name="default_streaming_duration" type="number"
value="{{ context.default_streaming_duration }}"/>
</div>
</div>
<div class="form-group">
<label class="small text-secondary">Audio output</label>
<select class="form-control" name="audio_output">
{% if context.audio_output == 'hdmi' %}
<option value="hdmi" selected="selected">HDMI</option>
<option value="local">3.5mm jack</option>
{% else %}
<option value="hdmi">HDMI</option>
<option value="local" selected="selected">3.5mm jack</option>
{% endif %}
</select>
</div>
<div class="form-group">
<label class="small text-secondary">Date format</label>
<select class="form-control" name="date_format">
<option value="mm/dd/yyyy"
{% if context.date_format == 'mm/dd/yyyy' %} selected="selected" {% endif %}>
month/day/year
</option>
<option value="dd/mm/yyyy"
{% if context.date_format == 'dd/mm/yyyy' %} selected="selected" {% endif %}>
day/month/year
</option>
<option value="yyyy/mm/dd"
{% if context.date_format == 'yyyy/mm/dd' %} selected="selected" {% endif %}>
year/month/day
</option>
<option value="mm-dd-yyyy"
{% if context.date_format == 'mm-dd-yyyy' %} selected="selected" {% endif %}>
month-day-year
</option>
<option value="dd-mm-yyyy"
{% if context.date_format == 'dd-mm-yyyy' %} selected="selected" {% endif %}>
day-month-year
</option>
<option value="yyyy-mm-dd"
{% if context.date_format == 'yyyy-mm-dd' %} selected="selected" {% endif %}>
year-month-day
</option>
<option value="mm.dd.yyyy"
{% if context.date_format == 'mm.dd.yyyy' %} selected="selected" {% endif %}>
month.day.year
</option>
<option value="dd.mm.yyyy"
{% if context.date_format == 'dd.mm.yyyy' %} selected="selected" {% endif %}>
day.month.year
</option>
<option value="yyyy.mm.dd"
{% if context.date_format == 'yyyy.mm.dd' %} selected="selected" {% endif %}>
year.month.day
</option>
</select>
</div>
<div class="form-group mb-0">
<label class="small text-secondary">Authentication</label>
<select class="form-control" id="auth_backend" name="auth_backend">
{% for opt in context.auth_backends %}
<option value="{{ opt.name }}" {{ opt.selected }}>{{ opt.text }}</option>
{% endfor %}
</select>
</div>
{% if context.need_current_password %}
<div class="form-group" id="curpassword_group">
<label class="small text-secondary">Current Password</label>
<input class="form-control" name="current-password" type="password" value="">
</div>
{% endif %}
{% for backend in context.auth_backends %}
{% if backend.template %}
<div id="auth_backend-{{ backend.name }}">
{% include backend.template %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="form-group col-6 d-flex flex-column justify-content-start">
<div class="form-inline mt-4">
<label>Show splash screen</label>
<div class="ml-auto">
<label id="splash_checkbox"
class="is_enabled-toggle toggle switch-light switch-material small m-0">
{% if context.show_splash %}
<input name="show_splash" checked="checked" type="checkbox"/>
{% else %}
<input name="show_splash" type="checkbox"/>
{% endif %}
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-inline mt-4">
<label>Default assets</label>
<div class="ml-auto">
<label id="default_assets_checkbox"
class="is_enabled-toggle toggle switch-light switch-material small m-0">
{% if context.default_assets %}
<input name="default_assets" checked="checked" type="checkbox"/>
{% else %}
<input name="default_assets" type="checkbox"/>
{% endif %}
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-inline mt-4">
<label>Shuffle playlist</label>
<div class="ml-auto">
<label id="shuffle_checkbox"
class="is_enabled-toggle toggle switch-light switch-material small m-0">
{% if context.shuffle_playlist %}
<input name="shuffle_playlist" checked="checked" type="checkbox"/>
{% else %}
<input name="shuffle_playlist" type="checkbox"/>
{% endif %}
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-inline mt-4">
<label>Use 24-hour clock</label>
<div class="ml-auto">
<label id="use_24_hour_clock_checkbox"
class="is_enabled-toggle toggle switch-light switch-material small m-0">
{% if context.use_24_hour_clock %}
<input name="use_24_hour_clock" checked="checked" type="checkbox"/>
{% else %}
<input name="use_24_hour_clock" type="checkbox"/>
{% endif %}
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-inline mt-4">
<label>Debug logging</label>
<div class="ml-auto">
<label id="debug_checkbox"
class="is_enabled-toggle toggle switch-light switch-material small m-0">
{% if context.debug_logging %}
<input name="debug_logging" checked="checked" type="checkbox">
{% else %}
<input name="debug_logging" type="checkbox">
{% endif %}
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
</div>
<div class="form-group col-6 offset-6">
</div>
<div class="form-group col-12">
<div class="text-right">
<a class="btn btn-long btn-outline-primary" href="/">Cancel</a>
<input class="btn btn-long btn-primary" type="submit" value="Save Settings">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container mt-4">
<div class="row py-2">
<div class="col-12">
<h4 class="page-header text-white">
<b>Backup</b>
</h4>
</div>
</div>
<div class="row content px-3">
{# Backup #}
<div id="backup-section" class="col-12 my-3">
<div class="text-right">
<input name="backup_upload" style="display:none" type="file">
<button id="btn-backup" class="btn btn-long btn-outline-primary">Get Backup</button>
<button id="btn-upload" class="btn btn-primary" type="button">Upload and Recover
</button>
</div>
<div class="progress-bar progress-bar-striped progress active w-100" style="display:none">
<div class="bar"></div>
</div>
</div>
</div>
</div>
{% if not (context.is_balena or context.is_docker) %}
{# USB assets #}
<div class="container mt-4">
<div class="row py-2">
<div class="col-12">
<h4 class="page-header text-white">
<b>USB Assets</b>
</h4>
</div>
</div>
<div class="row content px-3">
<div id="usb-assets-key-section" class="col-12 my-3">
<p>Put file with the generated key in USB to use the USB assets.</p>
<div class="text-right">
<button id="btn-view-usb-assets-file" class="btn btn-primary btn-long" type="button">Generate file
</button>
</div>
</div>
<div id="view-usb-assets-file-modal" class="modal hide fade" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-header">
<h3 id="modalLabel">Usb assets file</h3>
</div>
<div class="modal-body pb-0 row">
<div class="form-group col-6">
<label class="small text-secondary">Start Date</label>
<input class="form-control date" name="start_date_date" type="text"/>
<input name="start_date" type="hidden"/>
</div>
<div class="form-inline col-6">
<label>Activate assets</label>
<div class="ml-auto">
<label class="switch-light switch-material small m-0">
<input name="activate_assets" type="checkbox"/>
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-group col-6">
<label class="small text-secondary">End Date</label>
<input class="form-control date" name="end_date_date" type="text"/>
<input name="end_date" type="hidden"/>
</div>
<div class="form-inline col-6">
<label>Copy to internal memory</label>
<div class="ml-auto">
<label class="toggle switch-light switch-material small m-0">
<input name="copy_assets" type="checkbox"/>
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-group col-6">
<label class="small text-secondary">Duration</label>
<input class="form-control" name="duration" type="number" value="10"/>
</div>
<div class="form-group col-6">
<label class="small text-secondary">Usb assets key</label>
<input id="usb-assets-key-badge" class="form-control mb-3" type="text" value="{{ context.usb_assets_key }}" readonly>
</div>
<div class="form-group col-12">
<div class="text-right">
<button id="generate-usb-assets-key-btn" class="btn btn-primary btn-long"
type="button">
Generate new key
</button>
</div>
</div>
</div>
<div class="modal-footer text-right">
<button id="close-view-usb-assets-file-btn" class="btn btn-outline-dark btn-long"
type="button">
Close
</button>
<button id="btn-download-usb-assets-key" class="btn btn-primary btn-long" type="button">
Download file
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{# Upgrade #}
<div class="container mt-4">
<div class="row py-2">
<div class="col-12">
<h4 class="page-header text-white">
<b>Upgrade Anthias</b>
</h4>
</div>
</div>
<div class="row content px-3">
<div id="upgrade-section" class="col-12 my-3">
<div class="text-right">
<button id="btn-upgrade" class="btn btn-primary btn-long" type="button">Upgrade</button>
</div>
</div>
<div id="upgrade-modal" class="modal hide fade" aria-hidden="true"
data-backdrop="static" data-keyboard="false" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-header">
<h3 id="modalLabel">Upgrade Anthias</h3>
</div>
<div class="modal-body">
<form id="upgrade-form">
<div id="branch-group-radio" class="form-group">
<label>Choose the branch you want to use</label>
<div class="form-inline">
<div class="custom-control custom-radio mr-4">
<input type="radio" class="custom-control-input" id="latest_branch"
name="groupOfBranch" value="latest" checked>
<label class="custom-control-label"
for="latest_branch">Latest</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="production_branch"
name="groupOfBranch" value="production">
<label class="custom-control-label"
for="production_branch">Production</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label text-left">Do you want Screenly to
manage
your
network? This is recommended for most users.</label>
<div class="col-3">
<label id="manage_network_checkbox" class="toggle switch-light switch-material small m-0">
<input name="manage_network" checked="checked" type="checkbox"/>
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-form-label text-left">Would you like to perform a full system upgrade as well?</label>
<div class="col-3">
<label id="system_upgrade_checkbox" class="toggle switch-light switch-material small m-0">
<input name="system_upgrade" type="checkbox"/>
<span><span></span><span></span><a></a></span>
</label>
</div>
</div>
<div class="form-group" id="upgrade_logs_block">
<label for="upgrade_logs">Logs:</label>
<textarea readonly class="form-control terminal" rows="5"
id="upgrade_logs"></textarea>
</div>
<div class="form-group">
<label class="text-left"><small>Notice: If you leave the page before the
upgrade is complete, don't worry. The next time click "Start
upgrade"
you will see logs of the last upgrade if it's not finished
yet.</small></label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="close-upgrade-btn" class="btn btn-outline-dark btn-long" type="button">
Close
</button>
<button id="start-upgrade-btn" class="btn btn-primary btn-long" type="button">
Start upgrade
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{# Reset Wifi #}
<div class="container mt-4">
<div class="row py-2">
<div class="col-12">
<h4 class="page-header text-white">
<b>Reset Wi-Fi Config</b>
</h4>
</div>
</div>
<div class="row content px-3">
<div id="wifi-section" class="col-12 my-3">
<p>Run it, and if the next boot does not have a network connection, you will be prompted to select a
WiFi
network. <b>Warning:</b> After pressing, a reboot is required. Web interface will not be
available
until reboot.</p>
<div class="text-right">
<button id="btn-reset" class="btn btn-danger btn-long" type="button">Reset Wi-Fi</button>
</div>
</div>
</div>
</div>
{% endif %}
{# System controls #}
<div class="container mt-4">
<div class="row py-2">
<div class="col-12">
<h4 class="page-header text-white">
<b>System Controls</b>
</h4>
</div>
</div>
<div class="row content px-3">
<div id="system-controls-section" class="col-12 my-3">
<div class="text-right">
<button id="btn-reboot-system" class="btn btn-danger btn-long" type="button">Reboot</button>
<button id="btn-shutdown-system" class="btn btn-danger btn-long" type="button">Shutdown</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}