Did a lot of styling on letter & register view; introduced a new accent color. Added scroll and submit vutton, TODO style submit button

This commit is contained in:
schnulller
2022-06-09 02:07:21 +02:00
parent c2ecf0ea23
commit 11ccd7772e
20 changed files with 2324 additions and 4734 deletions

View File

@@ -25,17 +25,7 @@
}
<div class="ha-uploadpublishforms">
<form class="ha-uploadform" id="uploadForm" asp-controller="API" asp-action="Upload" method="post" enctype="multipart/form-data">
<label class="ha-uploadfilelabel" id="dropzone">
<input class="hidden" id="file" type="file" accept=".xml" name="file" />
<div class="ha-uploadtext">Upload</div>
<div class="ha-lds-ellipsis" id="ha-lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</label>
<div class="ha-uploadmessage" id="ha-uploadmessage">
Fehler!<br/>
<output form="uploadForm" name="upload-result"></output>
</div>
</form>
@await Html.PartialAsync("/Views/Shared/_UploadForm.cshtml", Model)
<a class="ha-publishbutton" asp-controller="Upload" asp-action="Index" asp-route-id="@string.Empty">
<div class="ha-publishtext">Veröffentlichen</div>
@@ -43,62 +33,64 @@
</div>
</div>
<div class="ha-uploadheader">
<h1 class="ha-uploadtitle">@Model.ActiveTitle</h1>
</div>
<div class="ha-uploadcontainer">
@* File Category Page File List *@
@if (Model.AvailableFiles != null && Model.AvailableFiles.Any()) {
<div class="ha-filesheader">
<div class="ha-availablefiles" id="ha-availablefiles">
<div class="ha-availablefilestitle">Datei(en)</div>
@if(Model.UsedFiles != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-usedfilelist">
@foreach (var item in Model.UsedFiles[Model.Prefix]!)
{
if(item == Model.UsedFiles[Model.Prefix]!.Last()) {
<span class="ha-usedfile">@item.FileName</span>
}
else {
<span class="ha-usedfile">@item.FileName,</span>
@* File Category Page File List *@
@if (Model.AvailableFiles != null && Model.AvailableFiles.Any()) {
<div class="ha-filesheader">
<div class="ha-availablefiles" id="ha-availablefiles">
<div class="ha-availablefilestitle">Datei(en)</div>
@if(Model.UsedFiles != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-usedfilelist">
@foreach (var item in Model.UsedFiles[Model.Prefix]!)
{
if(item == Model.UsedFiles[Model.Prefix]!.Last()) {
<span class="ha-usedfile">@item.FileName</span>
}
else {
<span class="ha-usedfile">@item.FileName,</span>
}
}
</div>
}
</div>
}
</div>
<div class="ha-availablefileslist hidden" id="ha-availablefileslist">
@await Html.PartialAsync("/Views/Shared/_FileListForm.cshtml", (Model.AvailableFiles, "Verfügbare Dateien", "API", "SetUsed", Model.Prefix, "/Download/XML/" + Model.Prefix + "/", true))
</div>
</div>
<div class="ha-availablefileslist hidden" id="ha-availablefileslist">
@await Html.PartialAsync("/Views/Shared/_FileList.cshtml", (Model.AvailableFiles, "Verfügbare Dateien:", "API", "SetUsed", Model.Prefix, "/Download/XML/" + Model.Prefix + "/", true))
</div>
</div>
}
@* Start Page File List *@
else {
<div class="ha-publishfilelist">
@await Html.PartialAsync("/Views/Shared/_PublishForm.cshtml", Model)
</div>
<div class="ha-hamannfilechooser">
@await Html.PartialAsync("/Views/Shared/_FileList.cshtml", (Model.HamannFiles, "Verfügbare Hamann-Dateien", "API", "SetUsedHamann", string.Empty, "/Download/XML/", false))
</div>
}
@* File Category Page Syntax Check *@
@if (Model.UsedFiles != null && Model.Prefix != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-errorswarnings">
<div class="ha-criticalerrors">
</div>
<div class="ha-warnings">
</div>
</div>
<div class="ha-crossfilechecking">
</div>
}
@if (Model.UsedFiles != null && Model.Prefix != null && Model.UsedFiles.ContainsKey(Model.Prefix)) {
<div class="ha-errorswarnings">
<div class="ha-criticalerrors">
</div>
<div class="ha-warnings">
</div>
</div>
<div class="ha-crossfilechecking">
</div>
}
}
@* Start Page File List *@
else {
<div class="ha-publishfilelist">
@await Html.PartialAsync("/Views/Shared/_PublishForm.cshtml", Model)
</div>
<div class="ha-hamannfilechooser">
@await Html.PartialAsync("/Views/Shared/_FileListForm.cshtml", (Model.HamannFiles, "Verfügbare Hamann-Dateien", "API", "SetUsedHamann", string.Empty, "/Download/XML/", false))
</div>
}
</div>
@@ -118,71 +110,6 @@ else {
}
}
const dropHandler = function (formelement, ev, dropzone) {
ev.preventDefault();
if (ev.dataTransfer.items) {
if (ev.dataTransfer.items[0].kind === 'file') {
var file = ev.dataTransfer.items[0].getAsFile();
UPLOADSubmit(formelement, file);
} else {
var file = ev.dataTransfer.files[0];
UPLOADSubmit(formelement, file);
}
}
}
const dragOverHandler = function (ev, dropzone) {
ev.preventDefault();
}
const dragLeaveHander = function (ev, dropzone) {
ev.preventDefault();
}
const dragEnterHandler = function (ev, dropzone) {
ev.preventDefault();
}
const UPLOADSubmit = async function (oFormElement, file = null) {
var fd = new FormData();
if (file !== null) fd.append("file", file);
else fd = new FormData(oFormElement);
document.getElementById("dropzone").style.pointerEvents = "none";
document.getElementById("ha-lds-ellipsis").style.display = "inline-block";
document.getElementById("ha-uploadmessage").style.opacity = "0";
await fetch(oFormElement.action, {
method: 'POST',
headers: {
'RequestVerificationToken': getCookie('RequestVerificationToken')
},
body: fd
})
.then(response => response.json())
.then(json => {
if ("Error" in json) {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis").style.display = "none";
document.getElementById("ha-uploadmessage").style.opacity = "1";
oFormElement.elements.namedItem("upload-result").value = json.Error;
} else {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis").style.display = "none";
oFormElement.elements.namedItem("upload-result").value = "Erfolg!";
if ("Prefix" in json[0]) {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis").style.display = "none";
window.location.replace("/Admin/Upload/" + json[0].Prefix);
}
}
})
.catch ((e) => {
document.getElementById("dropzone").style.pointerEvents = "auto";
document.getElementById("ha-lds-ellipsis").style.display = "none";
document.getElementById("ha-uploadmessage").style.opacity = "1";
oFormElement.elements.namedItem("upload-result").value = "Keine Antwort. Bitte Seite neu laden!";
})
}
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
@@ -190,19 +117,9 @@ else {
}
window.addEventListener("load", function () {
var submitelement = document.getElementById("file");
var formelement = document.getElementById("uploadForm");
var dropzone = document.getElementById("dropzone");
var filesbutton = document.getElementById("ha-availablefiles");
if (filesbutton !== null)
filesbutton.addEventListener("click", () => hideshowfiles());
submitelement.addEventListener("change", () => UPLOADSubmit(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));
});