change settings for backup restore

tubearchivist/home/templates/home/settings.html

@@ -98,6 +98,7 @@
             <ul>
                 <li><span class="settings-current">0 15 *</span>: Run task every day at 15:00 in the afternoon.</li>
                 <li><span class="settings-current">30 8 */2</span>: Run task every second day of the week (Sun, Tue, Thu, Sat) at 08:30 in the morning.</li>
+                <li><span class="settings-current">auto</span>: Sensible default.</li>
                 <li><span class="settings-current">0</span>: (zero), deactivate that task.</li>
             </ul>
             <p>Note:</p>
@@ -228,10 +229,25 @@
     <div class="settings-group">
         <h2>Restore from backup</h2>
         <p><span class="danger-zone">Danger Zone</span>: This will replace your existing index with the backup.</p>
-        <p>Add the backup zip file to the <span class="settings-current">cache/backup</span> folder.</p>
-        <div id="db-restore">
-            <button onclick="dbRestore()">Restore backup</button>
-        </div>
+        <p>Restore from available backup files from <span class="settings-current">cache/backup</span>.</p>
+        {% if available_backups %}
+            <div class="backup-grid-row">
+                <span></span>
+                <span>Timestamp</span>
+                <span>Source</span>
+                <span>Filename</span>
+            </div>
+            {% for backup in available_backups %}
+                <div class="backup-grid-row" id="{{ backup.filename }}">
+                    <button onclick="dbRestore(this)" data-id="{{ backup.filename }}">Restore</button>
+                    <span>{{ backup.timestamp }}</span>
+                    <span>{{ backup.reason }}</span>
+                    <span>{{ backup.filename }}</span>
+                </div>
+            {% endfor %}
+        {% else %}
+            <p>No backups found.</p>
+        {% endif %}
     </div>
     <div class="settings-group">
         <h2>Rescan filesystem</h2>

tubearchivist/static/css/style.css

@@ -62,7 +62,7 @@ ul {
     margin-left: 20px;
 }
 
-td, span, label {
+td, th, span, label {
     font-family: Sen-Regular, sans-serif;
     color: var(--main-font);
 }
@@ -866,6 +866,19 @@ button:hover {
     padding: 3px;
 }
 
+.backup-grid-row {
+    display: grid;
+    grid-template-columns: 10% 10% 10% auto;
+    align-items: center;
+    padding: 5px 10px;
+    border-bottom: solid 1px;
+    border-color: var(--main-font);
+}
+
+.backup-grid-row > span {
+    margin-left: 10px;
+}
+
 /* about */
 .about-section {
     padding: 20px 0;

tubearchivist/static/script.js

@@ -195,13 +195,14 @@ function dbBackup() {
     toReplace.appendChild(message);
 }
 
-function dbRestore() {
-    var payload = JSON.stringify({'db-restore': true});
+function dbRestore(button) {
+    var fileName = button.getAttribute("data-id");
+    var payload = JSON.stringify({'db-restore': fileName});
     sendPost(payload);
-    // clear button
+    // clear backup row
     var message = document.createElement('p');
     message.innerText = 'restoring from backup';
-    var toReplace = document.getElementById('db-restore');
+    var toReplace = document.getElementById(fileName);
     toReplace.innerHTML = '';
     toReplace.appendChild(message);
 }