Formatted everything; completed upload capabilities

HaWeb/Views/Admin/Upload/Index.cshtml

@@ -1,57 +1,79 @@
 @model UploadViewModel;
-Hello from Upload Index!
 
-<form id="uploadForm" action="Upload" method="post" 
-    enctype="multipart/form-data" onsubmit="AJAXSubmit(this);return false;">
-    <dl>
-        <dt>
-            <label for="file">File</label>
-        </dt>
-        <dd>
-            <input id="file" type="file" name="file" />
-        </dd>
-    </dl>
-
-    <input class="btn" type="submit" value="Upload" />
-
-    <div style="margin-top:15px">
-        <output form="uploadForm" name="result"></output>
+<div class="ha-adminuploadfields">
+  @foreach (var item in Model.AvailableRoots.OrderBy(x => x.Type)) {
+    <div class="ha-uploadfield">
+      <div class="ha-uploadfieldname">@item.Type</div>
+      @if (Model.UsedFiles != null && Model.UsedFiles.ContainsKey(item.Prefix)) {
+        @foreach(var file in Model.UsedFiles[item.Prefix]) {
+          <span>@file.File.Name</span>
+        } 
+      }
     </div>
-</form>
-
-@foreach (var item in Model.AvailableRoots.OrderBy(x => x.Item1))
-{
-  <div>@item.Item1</div>
-}
+  }
+  <form class="ha-uploadform" id="uploadForm" action="Upload" method="post" enctype="multipart/form-data">
+      <label class="filelabel" id="dropzone">
+        <input class="hidden" id="file" type="file" accept=".xml" name="file" />
+        Upload2 es
+      </label>
+      <div class="ha-uploadmessage">
+          <output form="uploadForm" name="result"></output>
+      </div>
+  </form>
+</div>
 
 @section Scripts {
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
-            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
-            asp-fallback-test="window.jQuery"
-            crossorigin="anonymous"
-            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
-    </script>
 
   <script>
     "use strict";
 
-    async function AJAXSubmit (oFormElement) {
-      const formData = new FormData(oFormElement);
+    const dropHandler = function (formelement, ev, dropzone) {
+      ev.preventDefault();
 
-      try {
-        const response = await fetch(oFormElement.action, {
+      if (ev.dataTransfer.items) {
+        if (ev.dataTransfer.items[0].kind === 'file') {
+          var file = ev.dataTransfer.items[0].getAsFile();
+          AJAXSubmit(formelement, file);
+        } else {
+          var file = ev.dataTransfer.files[0];
+          AJAXSubmit(formelement, file);
+        }
+      }
+    }
+
+    const dragOverHandler = function (ev, dropzone) {
+      ev.preventDefault();
+    }
+
+    const dragLeaveHander = function (ev, dropzone) {
+      ev.preventDefault();
+    }
+
+    const dragEnterHandler = function (ev, dropzone) {
+      ev.preventDefault();
+    }
+
+    const AJAXSubmit = async function (oFormElement, file = null) {
+      var fd = new FormData();
+      if (file !== null) fd.append("file", file);
+      else fd = new FormData(oFormElement);
+      oFormElement.elements.namedItem("result").value = "Wait";
+      await fetch(oFormElement.action, {
           method: 'POST',
           headers: {
             'RequestVerificationToken': getCookie('RequestVerificationToken')
           },
-          body: formData
-        });
-
-        oFormElement.elements.namedItem("result").value = 
-          'Result: ' + response.status + ' ' + response.statusText;
-      } catch (error) {
-        console.error('Error:', error);
-      }
+          body: fd
+        })
+        .then(response => response.json())
+        .then(json => {
+          if ("Error" in json) {
+            oFormElement.elements.namedItem("result").value = json.Error;
+          } else {
+            oFormElement.elements.namedItem("result").value = "Erfolg!";
+          }
+        })
+        .catch ((e) => console.error('Error:', error))
     }
 
     function getCookie(name) {
@@ -59,5 +81,18 @@ Hello from Upload Index!
       var parts = value.split("; " + name + "=");
       if (parts.length == 2) return parts.pop().split(";").shift();
     }
+
+    window.addEventListener("load", function () {
+      var submitelement = document.getElementById("file");
+      var formelement = document.getElementById("uploadForm");
+      var dropzone = document.getElementById("dropzone");
+      submitelement.addEventListener("change", () => AJAXSubmit(formelement));
+      dropzone.addEventListener("drop", (ev) => dropHandler(formelement, ev, dropzone));
+      dropzone.addEventListener("dragover", (ev) => dragOverHandler(ev, dropzone));
+      dropzone.addEventListener("dragleave", (ev) => dragLeaveHander(ev, dropzone));
+      dropzone.addEventListener("dragenter", (ev) => dragEnterHandler(ev, dropzone));
+    });
+
+    
   </script>
 }

HaWeb/Views/Briefe/Index.cshtml

@@ -7,46 +7,44 @@
     if (Model.MinWidthTrad)
         minwidthtrads = "ha-minwidth"; 
 }
-<div class="ha-twilighttogglebar">
-    <div class="ha-letterheader">
-        @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", Model.MetaData)
-        <div class="ha-letterheadernav">
-            <div class="ha-lettertabs">
-                @if (Model.ParsedText != null && !String.IsNullOrWhiteSpace(Model.ParsedText))
-                {
-                    <a class="" id="ha-lettertextbtn">Brieftext</a>
-                    @if (Model.ParsedMarginals != null)
-                    {
-                        <a class="ha-marginalsbtn " id="ha-marginalsbtn">Stellenkommentar</a>
-                    }
-                }
-                <a class="" id="ha-additionsbtn">Überlieferung & Textkritik</a>
-                <a class="">PDF</a>
-            </div>
-
-            @if (Model.MetaData.Next != null || Model.MetaData.Prev != null)
+<div class="ha-letterheader">
+    @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", Model.MetaData)
+    <div class="ha-letterheadernav">
+        <div class="ha-lettertabs">
+            @if (Model.ParsedText != null && !String.IsNullOrWhiteSpace(Model.ParsedText))
             {
-                <div class="ha-lettermetalinks">
-                    @if (Model.MetaData.Prev != null)
-                    {
-                        <a href="@Model.MetaData.Prev.Value.Item2">
-                            @Model.MetaData.Prev.Value.Item1.Meta.Autopsic ◀
-                        </a>
-                    }
-
-                    <div class="ha-hkb">
-                        HKB
-                    </div>
-
-                    @if (Model.MetaData.Next != null)
-                    {
-                        <a href="@Model.MetaData.Next.Value.Item2">
-                            ▶ @Model.MetaData.Next.Value.Item1.Meta.Autopsic
-                        </a>
-                    }
-                </div>
+                <a class="" id="ha-lettertextbtn">Brieftext</a>
+                @if (Model.ParsedMarginals != null)
+                {
+                    <a class="ha-marginalsbtn " id="ha-marginalsbtn">Stellenkommentar</a>
+                }
             }
+            <a class="" id="ha-additionsbtn">Überlieferung & Textkritik</a>
+            <a class="">PDF</a>
         </div>
+
+        @if (Model.MetaData.Next != null || Model.MetaData.Prev != null)
+        {
+            <div class="ha-lettermetalinks">
+                @if (Model.MetaData.Prev != null)
+                {
+                    <a href="@Model.MetaData.Prev.Value.Item2">
+                        @Model.MetaData.Prev.Value.Item1.Meta.Autopsic ◀
+                    </a>
+                }
+
+                <div class="ha-hkb">
+                    HKB
+                </div>
+
+                @if (Model.MetaData.Next != null)
+                {
+                    <a href="@Model.MetaData.Next.Value.Item2">
+                        ▶ @Model.MetaData.Next.Value.Item1.Meta.Autopsic
+                    </a>
+                }
+            </div>
+        }
     </div>
 </div>
 

HaWeb/Views/Shared/_Footer.cshtml

@@ -3,10 +3,8 @@
           <div class="flex grow shrink-0">
                <div class="ha-themetoggles">
                     <input type="radio" id="ha-toggledark" name="ha-themetoggle">
-                    <input type="radio" id="ha-toggletwilight" name="ha-themetoggle">
                     <input type="radio" id="ha-togglebright" name="ha-themetoggle">
                     <label for="ha-toggledark"></label>
-                    <label for="ha-toggletwilight"></label>
                     <label for="ha-togglebright"></label>
                     <div class="ha-themetoggleslider">
                     </div>