blob: 9fc478565da575582893eaf02fe9bfdcda2a1959 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
{% extends "base.html" %}
{% block script %}
var cset = function(option, value) {
// FIXME:conf we might want some error handling here?
var url = "qute://user:{{csrf_token}}@settings/set"
url += "?option=" + encodeURIComponent(option);
url += "&value=" + encodeURIComponent(value);
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
}
function checkInput(optionName, loopIndex) {
// Checks the input which has the configured value
let inputId = `input-${optionName}-${loopIndex}`
let input = document.getElementById(inputId)
input.checked = true
}
{% endblock %}
{% block style %}
table { border: hidden; border-spacing: 10px; }
tbody tr:nth-child(odd) { background: #eaf4fb; }
pre { margin: 2px; }
th, td { border: hidden; }
th { background: #a6dfff; font-weight: normal; padding: 10px; text-align: left;
border-radius: 5px; font-size: 1.5rem; color: #084c88; }
td { padding: 5px 5px; }
th pre { color: grey; text-align: left; }
input { width: 98%; font-size: 0.9rem; font-family: DejaVu, serif; box-sizing: border-box;
border-radius: 4px; border: 1px solid #01cdd0; padding: 8px; }
input:focus { outline: none; border: 2px solid #7a589ea6; }
.setting { width: 60%; }
input[type="radio"] { position: absolute; opacity: 1%; width: min-content; margin: 0; }
.valid_value { text-align: center; }
label { display: inline-flex; ; cursor: pointer; position: relative;
background-color: #454545; color: white; padding: 5px 10px;
border-radius: 5px; margin-bottom: 2px; }
input[type="radio"]:checked + label { background-color: #a6dfff; color: #084c88; }
.value { width: 25%; text-align: center; }
.noscript, .noscript-text { color:red; }
.noscript-text { margin-bottom: 5cm; }
.option_description { margin: .5ex 0; color: grey; font-size: 80%; font-style: italic;
white-space: pre-line; }
.current-setting { font-family: monospace; font-size: 1.2rem; }
{% endblock %}
{% block content %}
<noscript><h1 class="noscript">View Only</h1><p class="noscript-text">Changing settings requires javascript to be enabled!</p></noscript>
<table>
<tr>
<th>Setting</th>
<th>Value</th>
</tr>
{% for option in configdata.DATA.values()|sort(attribute='name') if not option.no_autoconfig %}
<tr>
<!-- FIXME: convert to string properly -->
<td class="setting">{{ option.name }} (Current: <span class="current-setting">{{ confget(option.name) | string |truncate(100) }}</span>)
{% if option.description %}
<p class="option_description">{{ option.description|e }}</p>
{% endif %}
</td>
{% if option.typ.valid_values is not none %}
<td class="valid_value">
{% for value in option.typ.valid_values.values %}
<input type="radio" id="input-{{ option.name }}-{{ loop.index0 }}"
name="{{ option.name }}" value="{{ value }}"
onclick="cset('{{ option.name }}', this.value)">
<label for="input-{{ option.name }}-{{ loop.index0 }}">
{{ value }}
</label>
{% if confget(option.name) == value %}
<script type="text/javascript">
checkInput('{{ option.name}}', {{ loop.index0 }})
</script>
{% endif %}
{% endfor %}
</td>
{% else %}
<td class="value">
<input type="text"
id="input-{{ option.name }}"
onblur="cset('{{ option.name }}', this.value)"
value="{{ confget(option.name) }}">
</input>
</td>
{% endif %}
</tr>
{% endfor %}
</table>
{% endblock %}
|
