add create snapshot now button

tubearchivist/home/templates/home/settings.html

@@ -162,10 +162,10 @@
             </div>
             <div>
                 {% if snapshots %}
-                    <p>Create next snapshot: <span class="settings-current">{{ snapshots.next_exec_str }}</span>, snapshots expire after <span class="settings-current">{{ snapshots.expire_after }}</span></p>
+                    <p>Create next snapshot: <span class="settings-current">{{ snapshots.next_exec_str }}</span>, snapshots expire after <span class="settings-current">{{ snapshots.expire_after }}</span>. <button onclick="createSnapshot()" id="createButton">Create snapshot now</button></p>
                     <br>
                     {% for snapshot in snapshots.snapshots %}
-                        <p><button id="{{ snapshot.id }}" onclick="restoreSnapshot(id)">Restore</button> Snapshot created on: <span class="settings-current">{{ snapshot.start_date }}</span>, took <span class="settings-current">{{ snapshot.duration_s }}s</span> to create.</p>
+                        <p><button id="{{ snapshot.id }}" onclick="restoreSnapshot(id)">Restore</button> Snapshot created on: <span class="settings-current">{{ snapshot.start_date }}</span>, took <span class="settings-current">{{ snapshot.duration_s }}s</span> to create. State: <i>{{ snapshot.state }}</i></p>
                     {% endfor %}
                 {% endif %}
             </div>

tubearchivist/static/script.js

@@ -297,6 +297,15 @@ function restoreSnapshot(snapshotId) {
   document.getElementById(snapshotId).parentElement.replaceWith(message);
 }
 
+function createSnapshot() {
+  console.log('create snapshot now');
+  let apiEndpoint = '/api/snapshot/';
+  apiRequest(apiEndpoint, 'POST');
+  let message = document.createElement('span');
+  message.innerText = 'Snapshot in progress';
+  document.getElementById('createButton').replaceWith(message);
+}
+
 // delete from file system
 function deleteConfirm() {
   let to_show = document.getElementById('delete-button');