Ability to edit Thoughts

main/static/main/main.css

@@ -98,7 +98,7 @@ a {
     text-decoration: none;
 }
 
-.text a {
+a {
     color: var(--accent-color);
 }
 .text p {
@@ -161,17 +161,21 @@ a {
 
 .permalink {
     margin-left: 6px;
-    color: var(--text-color)
+    color: var(--text-color);
 }
 .permalink .button, .permalink .button:visited {
     color: var(--accent-color);
     margin-left: 2px;
+    font-size: 14px;
 }
 .permalink .button:hover {
     text-decoration: underline;
 }
 .permalink::before {
-    content: "•"
+    content: "•";
+}
+.edit-link .button {
+    margin-right: 0;
 }
 
 /* Navbar styles */

main/templates/whispermaphone/index.html

@@ -59,6 +59,11 @@
                 <span class="permalink">
                     <a class="button" href="/?show={{thought.uuid}}">Link</a>
                 </span>
+                {% if thought.uuid == highlighted and authenticated %}
+                <span class="permalink edit-link">
+                    <a class="button" href="/post?editing={{thought.uuid}}">Edit</a>
+                </span>
+                {% endif %}
                 <span class="timestamp">
                     {% timezone thought.get_timezone %}
                         {{ thought.posted|time:"g:i a" }}

main/templates/whispermaphone/post.html

@@ -14,7 +14,7 @@
 {% endblock %}
 
 {% block main %}
-<form action="{% url 'post'%}" method="post" enctype="multipart/form-data" id="post-form">
+<form action="" method="post" enctype="multipart/form-data" id="post-form">
     <div class="error">{{ form_error }}</div>
 
     {% csrf_token %}
@@ -28,7 +28,7 @@
         {{ form.media_alt }}
     </div>
 
-    <input type="submit" id="post-button" value="Submit">
+    <input type="submit" id="post-button" value="{% if editing %}Update{% else %}Submit{% endif %}">
     {{ form.submit }}
 </form>
 
@@ -87,9 +87,11 @@
 
     const mediaInput = document.getElementById("id_media");
     const mediaAlt = document.getElementById("id_media_alt");
+    const clearCheckbox = document.getElementById("media-clear_id");
 
     function updateMediaAlt() {
-        if (mediaInput.value) {
+        // If we're editing and there was a file, then there will be a Clear button we can check for
+        if (mediaInput.value || (clearCheckbox && !clearCheckbox.checked)) {
             mediaAlt.classList.remove("hidden");
         }else {
             mediaAlt.classList.add("hidden");
@@ -100,6 +102,9 @@
         updateBoxHeight(mediaAlt);
     });
     mediaInput.addEventListener("input", updateMediaAlt);
+    if (clearCheckbox) {
+        clearCheckbox.addEventListener("change", updateMediaAlt);
+    }
     updateMediaAlt();
 
     const textboxes = document.getElementsByClassName("thought");

main/views.py

@@ -84,18 +84,23 @@ def post(request):
     if not check_authenticated(request):
         return redirect("login")
 
+    editing = request.GET.get("editing", None)
+    try: 
+        editing_thought = Thought.objects.get(uuid=editing)
+    except Thought.DoesNotExist:
+        editing_thought = None
+
     if request.method == "POST":
         # We post in hours, so we need to convert back to minutes for saving
         # We can pass errors since form.is_valid catches most of them
         # We just need to convert hours to minutes first, because otherwise it errors on non-integer values
-        if "timezone_offset" in request.POST:
-            values = request.POST.copy()
-            try:
-                values["timezone_offset"] = - float(values["timezone_offset"]) * 60
-            except ValueError:
-                pass
+        values = request.POST.copy()
+        try:
+            values["timezone_offset"] = - float(values["timezone_offset"]) * 60
+        except (ValueError, KeyError):
+            pass
 
-        thought_form = ThoughtForm(values, request.FILES, instance=Thought())
+        thought_form = ThoughtForm(values, request.FILES, instance=editing_thought or Thought())
 
         if not thought_form.is_valid():
             errors = thought_form.errors.as_data()
@@ -103,8 +108,7 @@ def post(request):
             try:
                 problem_field = list(errors.keys())[0]
                 message = list(errors.values())[0][0].messages[0]
-                # error_line = f"{problem_field[0].upper()}{problem_field[1:]}: {message}"
-                error_line = f"{message}"
+                error_line = f"{problem_field[0].upper()}{problem_field[1:]}: {message}"
             except:
                 error_line = f"An unknown error occurred processing your request: {errors}"
 
@@ -113,9 +117,12 @@ def post(request):
                 "form_error": error_line
             }, status=400)
 
-        # Create a thought object we can work with
-        # But don't save it the DB yet
-        thought = thought_form.save(commit=False)
+        if editing_thought:
+            thought = editing_thought
+        else:
+            # Create a thought object we can work with
+            # But don't save it the DB yet
+            thought = thought_form.save(commit=False)
 
         # Do media processing (already validated)
         if "media" in request.FILES:
@@ -137,11 +144,20 @@ def post(request):
                                 ], check=True)
                 os.remove(os.path.join(settings.MEDIA_ROOT, f"{thought.uuid}.m4a"))  # Remove the original file
                 thought.media.name = f"{thought.uuid}.aac"  # Update the file in the DB
+        else:
+            # We need to make sure that if we remove an image, the alt text is removed with it
+            thought.media_alt = ""
 
         # Save for real
         thought.save()
 
-    return render(request, "whispermaphone/post.html", {"form": ThoughtForm()})
+        # Redirect to the same page, so that we make a GET request to /post
+        return redirect("post")
+
+    return render(request, "whispermaphone/post.html", {
+        "form": ThoughtForm(instance=editing_thought) if editing_thought else ThoughtForm(),
+        "editing": not not editing_thought,
+    })
 
 
 def about(request):