-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
108 lines (100 loc) · 3.55 KB
/
index.html
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
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Magic Mirror Settings</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'>
<script src="jsoneditor.js"></script>
</head>
<body>
<div class="container">
<div class='page-header'>
<h1>Magic Mirror² Admin Interface</h1>
</div>
<p>
<button id='submit' class='btn btn-primary'>Save settings</button>
<button id='restore' class='btn btn-info'>Restore to Default</button>
<span id='valid_indicator' class='label'></span>
</p>
<p>
<div class="progress">
<div id="progress_bar" class="progress-bar progress-bar-striped active" style="width:0%"></div>
</div>
<div id="result_status" class="" role="alert"></div>
</p>
<div class='row'>
<div id='editor_holder' class='col-md-12'></div>
</div>
</div>
<script>
JSONEditor.defaults.theme = 'bootstrap3';
JSONEditor.defaults.iconlib = 'fontawesome4';
// This is the starting value for the editor
// We will use this to seed the initial editor
// and to provide a "Restore to Default" button.
const startingValue = {{starting_value}}; //{{starting_value}} is replaced with the current values form config.js when served
// Initialize the editor
var editor = new JSONEditor( document.getElementById( "editor_holder" ), {
ajax: true,
schema: {
$ref: "./schema.json",
format: "grid"
},
startval: startingValue
} );
// Hook up the submit button to send the settings to the server
document.getElementById( "submit" ).addEventListener( "click", function() {
var xhr = new XMLHttpRequest();
var config = JSON.stringify( editor.getValue(), null, "\t" );
xhr.open( "POST", "/MMM-Admin-Interface/", true );
xhr.onreadystatechange = function() {
var progress_bar = document.getElementById( "progress_bar" );
var result_status = document.getElementById( "result_status" );
switch ( xhr.readyState ) {
case 1:
progress_bar.style.width = "25%";
break;
case 2:
progress_bar.style.width = "50%";
break;
case 3:
progress_bar.style.width = "75%";
break;
case 4:
progress_bar.className = "progress-bar";
progress_bar.style.width = "100%";
if ( xhr.status === 200 ) {
result_status.className = "alert alert-success";
result_status.textContent = xhr.responseText;
} else {
result_status.className = "alert alert-warning";
result_status.textContent = xhr.responseText;
}
break;
}
};
xhr.setRequestHeader( "Content-type", "application/json" );
xhr.send( config );
} );
// Hook up the Restore to Default button
document.getElementById( "restore" ).addEventListener( "click", function() {
editor.setValue( startingValue );
} );
// Hook up the validation indicator to update its
// status whenever the editor changes
editor.on( "change", function() {
// Get an array of errors from the validator
var errors = editor.validate();
var indicator = document.getElementById( "valid_indicator" );
if ( errors.length ) {
indicator.className = "label label-warning";
indicator.textContent = "not valid";
} else {
indicator.className = "label label-success";
indicator.textContent = "valid";
}
} );
</script>
</body>
</html>