From 4845a4a3a6aca287d7edd4cca74c2b9085b1bc3a Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Sun, 10 Nov 2024 21:21:12 +0100
Subject: [PATCH] add import guide function to editor/viewer

---
 editor/editor.css |  8 ++++-
 editor/editor.js  | 87 +++++++++++++++++++++++++++++++++++++++++++++++
 editor/index.html | 46 +++++++------------------
 3 files changed, 106 insertions(+), 35 deletions(-)
 create mode 100644 editor/editor.js

diff --git a/editor/editor.css b/editor/editor.css
index 0a06105..dee9aba 100644
--- a/editor/editor.css
+++ b/editor/editor.css
@@ -32,6 +32,11 @@ body{
     padding: 20px 0;
 }
 
+/* Mode selection */
+body.viewer .editor {
+    display: none;
+}
+
 /* Navigation & Tool List */
 .nav{
     position: fixed;
@@ -59,6 +64,7 @@ body{
     box-sizing: border-box;
     background: var(--white);
     border-radius: 20px;
+    z-index: 999;
 }
 
 .toolBtn{
@@ -76,7 +82,7 @@ body{
     transition: var(--transition);
 }
 
-.toolBtn p{
+.toolBtn p, .toolBtn input{
     display: none;
 }
 
diff --git a/editor/editor.js b/editor/editor.js
new file mode 100644
index 0000000..8d9a42e
--- /dev/null
+++ b/editor/editor.js
@@ -0,0 +1,87 @@
+// Custom branding
+//document.body.style.setProperty('--primary', '#3498db');
+//document.getElementById("logo").src = "https://michivonah.ch/assets/logo/logo_white.svg";
+
+// Print Button
+const printBtn = document.getElementById("printBtn");
+printBtn.addEventListener('click', function(){
+    window.print();
+});
+
+// Import guide
+const importBtn = document.getElementById("importBtn");
+const fileInput = document.getElementById("file-import-input");
+importBtn.addEventListener('click', function(){
+    fileInput.click();
+});
+
+fileInput.addEventListener("change", (event) => {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = function(event){
+        const content = event.target.result;
+        const data = JSON.parse(content);
+        loadGuide(data);
+    };
+    reader.readAsText(file);
+});
+
+// add step
+const addStepBtn = document.getElementById("addStepBtn");
+addStepBtn.addEventListener('click', function(){
+    const stepsContainer = document.getElementById("stepsContainer");
+    stepsContainer.append(createStepElement("Title", "Description", "../logo/mockup-viewer-editor.jpg"));
+});
+
+// render guide with steps
+function loadGuide(data){
+    // render meta data
+    const guideTitle = document.getElementById("guideTitle");
+    const guideDescription = document.getElementById("guideDescription");
+    const guideAuthor = document.getElementById("guideAuthor");
+
+    guideTitle.textContent = data.title;
+    guideDescription.textContent = data.description;
+    guideAuthor.textContent = data.author;
+
+    // render steps
+    const steps =  data.steps;
+    const stepsContainer = document.getElementById("stepsContainer");
+
+    for (const step of steps){
+        const element = createStepElement(step.label, step.description, step.image);
+        stepsContainer.append(element);
+    }
+}
+
+function createStepElement(label, description, imgSrc){
+    // create container
+    const container = document.createElement("div");
+    container.classList = "step";
+
+    // create container for text & image
+    const textContainer = document.createElement("div");
+    const imgContainer = document.createElement("div");
+
+    // create title
+    const title = document.createElement("h2");
+    title.textContent = label;
+    textContainer.appendChild(title);
+
+    // create description
+    const desc = document.createElement("p");
+    desc.textContent = description;
+    textContainer.appendChild(desc);
+
+    // create image
+    const image = document.createElement("img");
+    image.src = imgSrc;
+    imgContainer.appendChild(image);
+
+    // append to main container
+    container.appendChild(textContainer);
+    container.appendChild(imgContainer);
+
+    // return step element
+    return container;
+}
\ No newline at end of file
diff --git a/editor/index.html b/editor/index.html
index cca4833..3f95069 100644
--- a/editor/index.html
+++ b/editor/index.html
@@ -20,63 +20,41 @@
         <link rel="stylesheet" type="text/css" href="editor.css"/>
         <script src="editor.js" defer></script>
     </head>
-    <body>
+    <body class="viewer-disabled">
         <div class="content">
             <div class="nav">
                 <img id="logo" class="logo" src="../logo/logo-invert.png" alt="Logo">
             </div>
             <div class="toolList editor">
-                <button class="toolBtn">
+                <button id="importBtn" class="toolBtn">
                     <span class="material-symbols-outlined">upload_file</span>
+                    <input id="file-import-input" type="file" accept=".json">
                     <p>Import</p>
                 </button>
                 <button class="toolBtn">
                     <span class="material-symbols-outlined">download</span>
                     <p>Export</p>
                 </button>
+                <button id="printBtn" class="toolBtn">
+                    <span class="material-symbols-outlined">print</span>
+                    <p>Print</p>
+                </button>
                 <button class="toolBtn">
                     <span class="material-symbols-outlined">share</span>
                     <p>Share link</p>
                 </button>
             </div>
-            <div class="stepsContainer">
+            <div id="stepsContainer" class="stepsContainer">
                 <div class="guideSettings">
                     <div>
-                        <h1>Guide Title</h1>
-                        <p>Description</p>
-                        <p>Author</p>
-                    </div>
-                </div>
-                <div class="step">
-                    <div>
-                        <h2>Step Name</h2>
-                        <p>Description</p>
-                    </div>
-                    <div>
-                        <img src="../logo/mockup-viewer-editor.jpg">
-                    </div>
-                </div>
-                <div class="step">
-                    <div>
-                        <h2>Step Name</h2>
-                        <p>Description</p>
-                    </div>
-                    <div>
-                        <img src="../logo/mockup-viewer-editor.jpg">
-                    </div>
-                </div>
-                <div class="step">
-                    <div>
-                        <h2>Step Name</h2>
-                        <p>Description</p>
-                    </div>
-                    <div>
-                        <img src="../logo/mockup-viewer-editor.jpg">
+                        <h1 id="guideTitle">Guide Title</h1>
+                        <p id="guideDescription">Description</p>
+                        <p id="guideAuthor">Author</p>
                     </div>
                 </div>
             </div>
             <div class="guideTools editor">
-                <button><span class="material-symbols-outlined">add</span>Add step</button>
+                <button id="addStepBtn"><span class="material-symbols-outlined">add</span>Add step</button>
             </div>
         </div>
     </body>