192 lines
5.4 KiB
Plaintext
192 lines
5.4 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>JSON Editor → PDF Preview</title>
|
|
<script>
|
|
|
|
|
|
</script>
|
|
<!-- ACE
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.6/ace.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.6/mode-json.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.6/theme-tomorrow.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
-->
|
|
|
|
<script src="/Scripts/ace/ace.js"></script>
|
|
<script src="/Scripts/ace/mode-json.min.js"></script>
|
|
<script src="/Scripts/ace/theme-tomorrow.min.js"></script>
|
|
<script src="/Scripts/ace/worker-json.js"></script>
|
|
<script src="/Scripts/jquery.min.js"></script>
|
|
<script src="/Scripts/ace/ext-searchbox.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.toolbar {
|
|
padding: 10px;
|
|
background: #f5f5f5;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.toolbar input {
|
|
width: 220px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.toolbar button {
|
|
margin-left: 5px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
height: calc(100vh - 60px);
|
|
}
|
|
|
|
.left, .right {
|
|
flex: 1;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.left {
|
|
border-right: 1px solid #ccc;
|
|
}
|
|
|
|
#editor {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
#pdfFrame {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #ccc;
|
|
background: #fafafa;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="toolbar">
|
|
<label>Schlüssel:</label>
|
|
<input type="text" id="key" placeholder="provDokumentID" />
|
|
<button onclick="loadJson()">Laden</button>
|
|
<button onclick="saveJson()">Speichern</button>
|
|
<button onclick="generatePdf()">PDF generieren</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- LINKS: JSON -->
|
|
<div class="left">
|
|
<div id="editor">{}</div>
|
|
</div>
|
|
|
|
<!-- RECHTS: PDF -->
|
|
<table>
|
|
<tr>
|
|
<div class="right">
|
|
<iframe id="pdfFrame" title="PDF Vorschau"></iframe>
|
|
</div>
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
const apiBase = "/api/json";
|
|
|
|
|
|
// ACE INIT
|
|
const editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/tomorrow");
|
|
editor.session.setMode("ace/mode/json");
|
|
editor.setShowPrintMargin(false);
|
|
editor.session.setTabSize(2);
|
|
editor.session.setUseSoftTabs(true);
|
|
const editor1 = ace.edit("editor");
|
|
editor1.setTheme("ace/theme/tomorrow");
|
|
editor1.session.setMode("ace/mode/json");
|
|
editor1.setShowPrintMargin(false);
|
|
editor1.session.setTabSize(2);
|
|
editor1.session.setUseSoftTabs(true);
|
|
|
|
// JSON LADEN
|
|
function loadJson() {
|
|
|
|
editor.setValue("", -1);
|
|
clearPdfPreview();
|
|
const key = $("#key").val();
|
|
if (!key) { alert("Bitte Schlüssel eingeben"); return; }
|
|
|
|
$.get(apiBase + "/load/" + encodeURIComponent(key))
|
|
.done(data => editor.setValue(data, -1))
|
|
.fail(() => alert("Kein Eintrag gefunden"));
|
|
}
|
|
|
|
// JSON SPEICHERN
|
|
function saveJson() {
|
|
const key = $("#key").val();
|
|
const json = editor.getValue();
|
|
|
|
if (!key) { alert("Bitte Schlüssel eingeben"); return; }
|
|
|
|
// try { JSON.parse(json); }
|
|
// catch { alert("Ungültiges JSON"); return; }
|
|
|
|
$.ajax({
|
|
url: apiBase + "/save",
|
|
type: "POST",
|
|
contentType: "application/json",
|
|
data: JSON.stringify({ key: key, json: json }),
|
|
success: () => alert("Gespeichert")
|
|
});
|
|
}
|
|
|
|
// PDF GENERIEREN & EMBEDDED ANZEIGEN
|
|
function generatePdf() {
|
|
const key = $("#key").val();
|
|
if (!key) { alert("Bitte Schlüssel eingeben"); return; }
|
|
|
|
fetch(apiBase + "/generatepdf", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
key: key,
|
|
json: editor.getValue()
|
|
})
|
|
})
|
|
.then(r => {
|
|
if (!r.ok) throw new Error("PDF-Fehler");
|
|
return r.blob();
|
|
})
|
|
.then(blob => {
|
|
const url = URL.createObjectURL(blob);
|
|
document.getElementById("pdfFrame").src = url;
|
|
})
|
|
.catch(err => alert(err.message));
|
|
}
|
|
function clearPdfPreview() {
|
|
const frame = document.getElementById("pdfFrame");
|
|
|
|
// iframe leeren
|
|
frame.src = "";
|
|
|
|
// optional: alte Blob-URL freigeben
|
|
if (frame.dataset.blobUrl) {
|
|
URL.revokeObjectURL(frame.dataset.blobUrl);
|
|
frame.dataset.blobUrl = "";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|