Saving indicator

professor/professor.html

@@ -44,7 +44,7 @@
     <label for="new_transcription">New transcription</label><textarea id="new_transcription" rows="3" placeholder=""></textarea>
 </div>
 
-<button id="submit_button" onclick="submit()" type="button">Submit</button>
+<button id="submit_button" onclick="submit()" type="button">Submit</button><span id="update_indicator"></span>
 
 <script src="video.js/dist/video.min.js"></script>
 

professor/script.js

@@ -35,6 +35,9 @@ function fillLineInfo(line_json) {
 }
 
 async function submit() {
+    document.getElementById("update_indicator").innerText = "⭯"
+
+
     const new_transcription = document.getElementById("new_transcription").value;
     const new_speakers = await Promise.all(document.getElementById("speaker_input").value
         .trim()
@@ -68,6 +71,12 @@ async function submit() {
                 'Content-Type': 'application/json'
             },
             body: JSON.stringify({transcription: new_transcription, speakers: new_speakers})
+        }).then(response => {
+        if (response.ok) {
+            document.getElementById("update_indicator").innerText = "\u2714\ufe0f"
+        } else {
+            document.getElementById("update_indicator").innerText = "\u2716\ufe0f️"
+        }
     })
 }
 

professor/style.less

@@ -50,3 +50,10 @@ button {
   margin-top: 5px;
   margin-bottom: 5px;
 }
+
+#update_indicator {
+  width: 1.3em;
+  height: 1.3em;
+  margin-left: 1em;
+  vertical-align: middle;
+}