hayun-vite 0.0.3 → 0.1.0

package/src/Form/Form_N.js

@@ -1,159 +1,159 @@
-const svgNS = "http://www.w3.org/2000/svg";
-
-import printForm from "./printForm.js";
-import Template from "./Templates/Template.js";
-import Template1 from "./Templates/Template1.js";
-import Template2 from "./Templates/Template2.js";
-import Template3 from "./Templates/Template3.js";
-
-
-export default class Form {
-    constructor({ name, container } = {}) {
-        // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
-        const div = document.createElement('div');
-        div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
-        container.appendChild(div);
-        // اضافه کردن دکمه به دیو فرم
-        const btn1 = this.putButton({ container: div, text: 'Form 1', id: 'template1' });
-        const btn2 = this.putButton({ container: div, text: 'Form 2', id: 'template2' });
-        const btn3 = this.putButton({ container: div, text: 'Form 3', id: 'template3' });
-        const printBtn = this.putButton({ container: div, text: 'Print', id: 'print' });
-
-        // this.container = div;
-
-        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
-        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
-        container.appendChild(this.div)
-
-        this.template1 = new Template({ container: this.div });
-        this.template2 = new Template2({ container: this.div });
-        this.template3 = new Template3({ container: this.div });
-
-        // تعریف رویداد دکمه چاپ فرم نمایشی
-        printBtn.addEventListener('click', () => { printForm({ container: this.activeForm }) })
-
-        // ایجاد المنت چک باکس با برچسب
-        // const checkBox = document.createElement('input');
-        // checkBox.setAttribute('type', 'checkbox');
-        // checkBox.setAttribute('id', 'chkb');
-        // const label = document.createElement('label');
-        // label.innerHTML = 'Select for Print';
-        // label.setAttribute('for', checkBox.getAttribute('id'))
-        // div.appendChild(checkBox)
-        // div.appendChild(label)
-
-        this.draw2();
-        // نمایش پیش‌فرض فرم شماره یک
-        this.template1.form.style.display = 'block';
-        this.activeForm = this.template1.form;
-
-        btn1.addEventListener('click', () => {
-            this.template2.form.style.display = 'none'
-            this.template3.form.style.display = 'none'
-            this.template1.form.style.display = 'block';
-            this.activeForm = this.template1.form;
-            console.log(this.activeForm);
-
-        });
-
-        btn2.addEventListener('click', () => {
-            this.template1.form.style.display = 'none'
-            this.template3.form.style.display = 'none'
-            this.template2.form.style.display = 'block';
-            this.activeForm = this.template2.form;
-
-        });
-
-        btn3.addEventListener('click', () => {
-            this.template1.form.style.display = 'none'
-            this.template2.form.style.display = 'none'
-            this.template3.form.style.display = 'block';
-            this.activeForm = this.template3.form;
-
-        });
-        // for Develop
-        this.event();
-
-    }
-
-    draw2() {
-        this.template1.draw();
-        this.template2.draw();
-        this.template3.draw();
-
-    }
-
-    draw() { }
-
-    event() {
-        this.div.addEventListener('click', (e) => {
-            console.log(e.target);
-        })
-    }
-
-    update({ template, data, officeData, patientData, sessionIndex = 0 }) {
-
-        this.template1.update({ data, officeData, patientData, sessionIndex })
-        this.template2.update({ data, officeData, patientData, sessionIndex })
-        this.template3.update({ data, officeData, patientData, sessionIndex })
-
-    }
-
-    // ایجاد دکمه تاگل خطوط مرزی فرم و سکشن و المان
-    toggleBorders({ activeForm, container = 'form' }) {
-
-        const borders = activeForm.querySelectorAll(`[data-name="${container}-border"]`);
-        // آبجکت نگهداری رنگ بوردرها
-        const color = { form: 'black', section: 'blue', element: 'green' }
-        borders.forEach(border => {
-            // console.log(border.style.stroke);
-            border.style.stroke = (border.style.stroke === 'transparent') ? color[container] : 'transparent';
-        })
-    }
-
-    // توابع داخلی ایجاد دکمه و لینک های بالای فرم
-    putButton({ container, id, text, }) {
-        let style = `
-            background-color:rgb(0, 149, 149);
-            /* Green background */
-            border: none;
-            /* Remove borders */
-            color: white;
-            /* White text */
-            padding: 15px 32px;
-            /* Some padding */
-            text-align: center;
-            /* Centered text */
-            text-decoration: none;
-            /* Remove underline */
-            display: inline-block;
-            /* Make the button inline */
-            font-size: 16px;
-            /* Increase font size */
-            margin: 4px 2px;
-            /* Add some margin */
-            cursor: pointer;
-            /* Pointer cursor on hover */
-            border-radius: 8px;
-            /* Rounded corners */
-            transition: background-color 0.3s;
-            /* Smooth transition */
-        `;
-        const button = document.createElement('button');
-        button.setAttribute('id', id);
-        button.setAttribute('style', style);
-        button.innerHTML = text;
-
-        button.addEventListener('mouseenter', () => {
-            button.style.backgroundColor = 'rgb(54, 115, 115)'; // Change color on hover
-        });
-        button.addEventListener('mouseleave', () => {
-            button.style.backgroundColor = 'rgb(0, 149, 149)'; // Revert color when not hovering
-        });
-
-        container.appendChild(button);
-        return button;
-
-    }
-
+const svgNS = "http://www.w3.org/2000/svg";
+
+import printForm from "./printForm.js";
+import Template from "./Templates/Template.js";
+import Template1 from "./Templates/Template1.js";
+import Template2 from "./Templates/Template2.js";
+import Template3 from "./Templates/Template3.js";
+
+
+export default class Form {
+    constructor({ name, container } = {}) {
+        // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
+        const div = document.createElement('div');
+        div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
+        container.appendChild(div);
+        // اضافه کردن دکمه به دیو فرم
+        const btn1 = this.putButton({ container: div, text: 'Form 1', id: 'template1' });
+        const btn2 = this.putButton({ container: div, text: 'Form 2', id: 'template2' });
+        const btn3 = this.putButton({ container: div, text: 'Form 3', id: 'template3' });
+        const printBtn = this.putButton({ container: div, text: 'Print', id: 'print' });
+
+        // this.container = div;
+
+        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
+        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
+        container.appendChild(this.div)
+
+        this.template1 = new Template({ container: this.div });
+        this.template2 = new Template2({ container: this.div });
+        this.template3 = new Template3({ container: this.div });
+
+        // تعریف رویداد دکمه چاپ فرم نمایشی
+        printBtn.addEventListener('click', () => { printForm({ container: this.activeForm }) })
+
+        // ایجاد المنت چک باکس با برچسب
+        // const checkBox = document.createElement('input');
+        // checkBox.setAttribute('type', 'checkbox');
+        // checkBox.setAttribute('id', 'chkb');
+        // const label = document.createElement('label');
+        // label.innerHTML = 'Select for Print';
+        // label.setAttribute('for', checkBox.getAttribute('id'))
+        // div.appendChild(checkBox)
+        // div.appendChild(label)
+
+        this.draw2();
+        // نمایش پیش‌فرض فرم شماره یک
+        this.template1.form.style.display = 'block';
+        this.activeForm = this.template1.form;
+
+        btn1.addEventListener('click', () => {
+            this.template2.form.style.display = 'none'
+            this.template3.form.style.display = 'none'
+            this.template1.form.style.display = 'block';
+            this.activeForm = this.template1.form;
+            console.log(this.activeForm);
+
+        });
+
+        btn2.addEventListener('click', () => {
+            this.template1.form.style.display = 'none'
+            this.template3.form.style.display = 'none'
+            this.template2.form.style.display = 'block';
+            this.activeForm = this.template2.form;
+
+        });
+
+        btn3.addEventListener('click', () => {
+            this.template1.form.style.display = 'none'
+            this.template2.form.style.display = 'none'
+            this.template3.form.style.display = 'block';
+            this.activeForm = this.template3.form;
+
+        });
+        // for Develop
+        this.event();
+
+    }
+
+    draw2() {
+        this.template1.draw();
+        this.template2.draw();
+        this.template3.draw();
+
+    }
+
+    draw() { }
+
+    event() {
+        this.div.addEventListener('click', (e) => {
+            console.log(e.target);
+        })
+    }
+
+    update({ template, data, officeData, patientData, sessionIndex = 0 }) {
+
+        this.template1.update({ data, officeData, patientData, sessionIndex })
+        this.template2.update({ data, officeData, patientData, sessionIndex })
+        this.template3.update({ data, officeData, patientData, sessionIndex })
+
+    }
+
+    // ایجاد دکمه تاگل خطوط مرزی فرم و سکشن و المان
+    toggleBorders({ activeForm, container = 'form' }) {
+
+        const borders = activeForm.querySelectorAll(`[data-name="${container}-border"]`);
+        // آبجکت نگهداری رنگ بوردرها
+        const color = { form: 'black', section: 'blue', element: 'green' }
+        borders.forEach(border => {
+            // console.log(border.style.stroke);
+            border.style.stroke = (border.style.stroke === 'transparent') ? color[container] : 'transparent';
+        })
+    }
+
+    // توابع داخلی ایجاد دکمه و لینک های بالای فرم
+    putButton({ container, id, text, }) {
+        let style = `
+            background-color:rgb(0, 149, 149);
+            /* Green background */
+            border: none;
+            /* Remove borders */
+            color: white;
+            /* White text */
+            padding: 15px 32px;
+            /* Some padding */
+            text-align: center;
+            /* Centered text */
+            text-decoration: none;
+            /* Remove underline */
+            display: inline-block;
+            /* Make the button inline */
+            font-size: 16px;
+            /* Increase font size */
+            margin: 4px 2px;
+            /* Add some margin */
+            cursor: pointer;
+            /* Pointer cursor on hover */
+            border-radius: 8px;
+            /* Rounded corners */
+            transition: background-color 0.3s;
+            /* Smooth transition */
+        `;
+        const button = document.createElement('button');
+        button.setAttribute('id', id);
+        button.setAttribute('style', style);
+        button.innerHTML = text;
+
+        button.addEventListener('mouseenter', () => {
+            button.style.backgroundColor = 'rgb(54, 115, 115)'; // Change color on hover
+        });
+        button.addEventListener('mouseleave', () => {
+            button.style.backgroundColor = 'rgb(0, 149, 149)'; // Revert color when not hovering
+        });
+
+        container.appendChild(button);
+        return button;
+
+    }
+
 }

package/src/Form/Forms-Test.html

@@ -1,125 +1,125 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Form New Test</title>
-    <style>
-        button {
-            background-color: #4CAF50;
-            /* Green background */
-            border: none;
-            /* Remove borders */
-            color: white;
-            /* White text */
-            padding: 15px 32px;
-            /* Some padding */
-            text-align: center;
-            /* Centered text */
-            text-decoration: none;
-            /* Remove underline */
-            display: inline-block;
-            /* Make the button inline */
-            font-size: 16px;
-            /* Increase font size */
-            margin: 4px 2px;
-            /* Add some margin */
-            cursor: pointer;
-            /* Pointer cursor on hover */
-            border-radius: 8px;
-            /* Rounded corners */
-            transition: background-color 0.3s;
-            /* Smooth transition */
-        }
-
-        button:hover {
-            background-color: #45a049;
-            /* Darker green on hover */
-        }
-
-        button:active {
-            background-color: #3e8e41;
-            /* Even darker green when clicked */
-        }
-    </style>
-    <style>
-        @page {
-
-            size: a4 portrait;
-            margin: 0cm;
-        }
-
-        @media print {
-
-            /* All your print styles go here */
-            button {
-                display: none !important;
-            }
-
-            svg {
-                margin: 0;
-            }
-
-            body {
-                margin: 0;
-            }
-        }
-    </style>
-</head>
-<!-- <button></button> -->
-
-<body>
-    <input type="checkbox" id="a">
-    <label for="a">Select for Print</label>
-    <button id="formBtn">Hide Form Margins</button>
-    <button id="sectionBtn">Hide Section Margins</button>
-    <button id="elementBtn">Hide Element Margins</button>
-    <button id="printBtn">Print Form</button>
-    <!-- <svg width="210mm" height="298mm" id="form-div" style="border: 1px solid blue"></svg> -->
-    <div id="form-div"></div>
-
-    <script type="module">
-        import Forms from "./Forms.js";
-        import { officeData, patientData } from "../../data/sampleData.js"
-        const forms = new Forms({ container: document.getElementById('form-div'), name: 'form1' });
-        // form.draw();
-        // تابع افزودن دکمه‌های تاگل نمایش و محو خطوط راهنما هر سه نوع
-        // form section element
-        // document.getElementById('formBtn').addEventListener('mouseenter', () => {
-        //     forms.toggleBorders({ container: 'form', activeForm: form.activeForm });
-        // });
-
-        // document.getElementById('sectionBtn').addEventListener('mouseenter', () => {
-        //     forms.toggleBorders({ container: 'section', activeForm: form.activeForm });
-        // });
-
-        // document.getElementById('elementBtn').addEventListener('mouseenter', () => {
-        //     forms.toggleBorders({ container: 'element', activeForm: form.activeForm });
-        // });
-
-        // document.getElementById('printBtn').addEventListener('mouseenter', () => {
-        //     // form.toggleBorders({container: 'element'});
-        //     // window.print()
-        //     // const printDateTime = form.print();
-        //     // console.log(printDateTime);
-
-        // });
-
-
-
-        // const data = {
-        //     audiogram: {
-        //         R: { R_AC: { 500: 25, 1000: 35, 2000: 45, 4000: 55, 8000: 60 } },
-        //         L: { L_AC: { 500: 70, 1000: 75, 2000: 80, 4000: 65, 8000: 60 } }
-        //     },
-        //     tympanogram: {
-        //         R: { ECV: 2.52, SC: 0.80, MEP: -100, type: 'An' },
-        //         L: { ECV: 2.52, SC: 0.80, MEP: -300, type: 'An' }
-        //     }
-        // }
-        forms.update({ officeData, patientData, sessionIndex: 0 })
-    </script>
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form New Test</title>
+    <style>
+        button {
+            background-color: #4CAF50;
+            /* Green background */
+            border: none;
+            /* Remove borders */
+            color: white;
+            /* White text */
+            padding: 15px 32px;
+            /* Some padding */
+            text-align: center;
+            /* Centered text */
+            text-decoration: none;
+            /* Remove underline */
+            display: inline-block;
+            /* Make the button inline */
+            font-size: 16px;
+            /* Increase font size */
+            margin: 4px 2px;
+            /* Add some margin */
+            cursor: pointer;
+            /* Pointer cursor on hover */
+            border-radius: 8px;
+            /* Rounded corners */
+            transition: background-color 0.3s;
+            /* Smooth transition */
+        }
+
+        button:hover {
+            background-color: #45a049;
+            /* Darker green on hover */
+        }
+
+        button:active {
+            background-color: #3e8e41;
+            /* Even darker green when clicked */
+        }
+    </style>
+    <style>
+        @page {
+
+            size: a4 portrait;
+            margin: 0cm;
+        }
+
+        @media print {
+
+            /* All your print styles go here */
+            button {
+                display: none !important;
+            }
+
+            svg {
+                margin: 0;
+            }
+
+            body {
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<!-- <button></button> -->
+
+<body>
+    <input type="checkbox" id="a">
+    <label for="a">Select for Print</label>
+    <button id="formBtn">Hide Form Margins</button>
+    <button id="sectionBtn">Hide Section Margins</button>
+    <button id="elementBtn">Hide Element Margins</button>
+    <button id="printBtn">Print Form</button>
+    <!-- <svg width="210mm" height="298mm" id="form-div" style="border: 1px solid blue"></svg> -->
+    <div id="form-div"></div>
+
+    <script type="module">
+        import Forms from "./Forms.js";
+        import { officeData, patientData } from "../../data/sampleData.js"
+        const forms = new Forms({ container: document.getElementById('form-div'), name: 'form1' });
+        // form.draw();
+        // تابع افزودن دکمه‌های تاگل نمایش و محو خطوط راهنما هر سه نوع
+        // form section element
+        // document.getElementById('formBtn').addEventListener('mouseenter', () => {
+        //     forms.toggleBorders({ container: 'form', activeForm: form.activeForm });
+        // });
+
+        // document.getElementById('sectionBtn').addEventListener('mouseenter', () => {
+        //     forms.toggleBorders({ container: 'section', activeForm: form.activeForm });
+        // });
+
+        // document.getElementById('elementBtn').addEventListener('mouseenter', () => {
+        //     forms.toggleBorders({ container: 'element', activeForm: form.activeForm });
+        // });
+
+        // document.getElementById('printBtn').addEventListener('mouseenter', () => {
+        //     // form.toggleBorders({container: 'element'});
+        //     // window.print()
+        //     // const printDateTime = form.print();
+        //     // console.log(printDateTime);
+
+        // });
+
+
+
+        // const data = {
+        //     audiogram: {
+        //         R: { R_AC: { 500: 25, 1000: 35, 2000: 45, 4000: 55, 8000: 60 } },
+        //         L: { L_AC: { 500: 70, 1000: 75, 2000: 80, 4000: 65, 8000: 60 } }
+        //     },
+        //     tympanogram: {
+        //         R: { ECV: 2.52, SC: 0.80, MEP: -100, type: 'An' },
+        //         L: { ECV: 2.52, SC: 0.80, MEP: -300, type: 'An' }
+        //     }
+        // }
+        forms.update({ officeData, patientData, sessionIndex: 0 })
+    </script>
+</body>
+
 </html>