hayun-vite 0.0.0 → 0.0.1

package/src/Form/Form.js

@@ -0,0 +1,277 @@
+// import Audiogram from "../Audiogram/Audiogram_N.js";
+import putLine from "../common/putLine.js";
+import drawTopLayer from "../common/putTopLayer.js";
+import Symbols from "../Symbol/Symbols.js";
+import TextBox from "./TextBox.js";
+import Header from "./Header.js";
+import Reflex from "./Reflex.js";
+import Sections from "./Sections.js";
+import Speech from "./Speech.js";
+import Tympanogram from "./Tympanogram.js";
+// import AudiogramChart from "../Audiogram/AudiogramChart_N.js";
+
+import dims from "../Audiogram/dims.js";
+import putRect from "../common/putRect.js";
+import AudiogramChart from "../Audiogram/Audiogram.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+
+
+
+export default class Form {
+    constructor({ container, template, image } = {}) {
+        this.image = image;
+        // const dims = template;
+        this.template = template;
+        this.container = container;
+        this.data = {};
+        let { width, height, margin, paper } = template;
+        this.form = this.create({ paper, margin });
+        this.form.style.display = 'none';
+        // رسم مارجین های فرم
+        this.drawMarginLines({ container: this.form, width, height });
+
+        const sections = new Sections({ container: this.form, dims: template });
+        this.sections = sections;
+
+        if (sections.header) {
+            this.header = new Header({ container: sections.header })
+            this.header.draw({ dims: template.header });
+        }
+
+        if (sections.patient) {
+            this.patient = new TextBox({ container: sections.patient });
+            this.patient.draw({ dims: template.patient });
+        }
+
+
+        if (sections.history) {
+            this.history = new TextBox({ container: sections.history })
+            this.history.draw({ dims: template.history });
+        }
+
+        this.symbols = new Symbols();
+
+        if (sections.RAudiogram) {
+            this.RAudiogram = new AudiogramChart({
+                container: sections.RAudiogram,
+                dims: template.RAudiogram,
+                side: 'R',
+            });
+        }
+        if (sections.LAudiogram) {
+            this.LAudiogram = new AudiogramChart({
+                container: sections.LAudiogram,
+                dims: template.LAudiogram,
+                side: 'L',
+            });
+        }
+        if (sections.RSpeech) {
+            this.RSpeech = new Speech({ container: sections.RSpeech, side: 'R' })
+            this.RSpeech.draw({ dims: template.RSpeech, })
+        }
+        if (sections.LSpeech) {
+            this.LSpeech = new Speech({ container: sections.LSpeech, side: 'L' })
+            this.LSpeech.draw({ dims: template.LSpeech, });
+        }
+        if (sections.RTympanogram) {
+            this.RTympanogram = new Tympanogram({ container: sections.RTympanogram, dims: template.RTympanogram })
+            this.RTympanogram.draw({ dims: template.RTympanogram });
+        }
+        if (sections.LTympanogram) {
+            this.LTympanogram = new Tympanogram({ container: sections.LTympanogram, dims: template.LTympanogram })
+            this.LTympanogram.draw({ dims: template.LTympanogram });
+        }
+        if (sections.RReflex) {
+            this.RReflex = new Reflex({ container: sections.RReflex, dims: template.RReflex })
+            this.RReflex.draw({ dims: template.RReflex });
+        }
+        if (sections.LReflex) {
+            this.LReflex = new Reflex({ container: sections.LReflex, dims: template.LReflex })
+            this.LReflex.draw({ dims: template.LReflex });
+        }
+        if (sections.report) {
+            this.report = new TextBox({ container: sections.report })
+            this.report.draw({ dims: template.report });
+        }
+        if (sections.footer) {
+
+            this.footer = new TextBox({ container: sections.footer })
+            this.footer.draw({ dims: template.footer });
+        }
+
+        this.container.appendChild(this.form);
+
+    }
+
+    draw() {
+
+        let pad;
+        let style = `
+            user-select: none;
+            direction: ltr !important;
+            /* text-align: center; */
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 1.3mm;
+            font-weight: bold;
+            color: red;
+             text-anchor: middle; /*تراز افقی*/
+             dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        // Draw Titles first
+        // putText({ container: this.sections.audiograms, value: "Right Ear", x: 42.5, y: 4, style: style })
+        // putText({ container: this.sections.speechs, value: "Speech Tests", x: this.sectionWidth / 2, y: 4, style: style })
+        // putText({ container: this.sections.tympanograms, value: "Tympanometry", x: this.sectionWidth / 2, y: 4, style: style })
+        // putText({ container: this.sections.reflexes, value: "Acoustic Reflexes", x: this.sectionWidth / 2, y: 4, style: style })
+
+
+        // برای مخفی کردن بوردرها تابع تاگل بوردر همین جا فراخوانی شود
+        // this.toggleBorders({ container: 'form' })
+        // this.toggleBorders({ container: 'section' })
+        // this.toggleBorders({ container: 'element' })
+
+
+        // بعد از رسم همه المنت ها یک المنت مستطیل تاپ لایر
+        // drawTopLayer({ container: this.form, dims: this.sections.dims });
+    }
+
+    create({ paper, margin }) {
+        const { width, height } = paper;
+        const { left, top } = margin;
+
+        const backgroundImage = this.template.backgroundImage;
+        let svg = document.createElementNS(svgNS, "svg");
+        svg.setAttribute("viewBox", [-left, -top, width, height])
+        svg.setAttribute("style", "background-color: BlanchedAlmond");
+        if (this.image) {
+            let image = document.createElementNS(svgNS, "image");
+            image.setAttribute('width', width);
+            image.setAttribute('height', height);
+
+            image.setAttribute('x', 0)
+            image.setAttribute('y', 0)
+            // image.setAttribute('height', height);
+            image.setAttribute('href', this.image);
+            
+            svg.appendChild(image);
+        }
+
+        // div.appendChild(svg);
+        return svg;
+    }
+
+    update({ data, officeData, patientData, sessionIndex = 0 }) {
+
+        const session = patientData.sessions[sessionIndex]
+        // Prevent undefined error 
+        if (!data) {
+            data = {
+                common: {
+                    audiometer: "",
+                    tympanometers: "",
+                },
+                header: {
+                    officeName: officeData.name,
+                    officeLogo: officeData.logo,
+                    createDate: patientData.sessions[sessionIndex]?.createDate,
+                },
+                patient: {
+                    name: patientData.name,
+                    lastName: patientData.lastName,
+                    gender: patientData?.gender,
+                    age: patientData.sessions[sessionIndex]?.age,
+                    referrer: patientData.sessions[sessionIndex]?.referrer,
+
+                },
+                footer: {
+                    address: officeData.addresses[0],
+                    tel: officeData.tels[0],
+                },
+                id: +sessionIndex + 1,
+            };
+            // data = { audiogram: {}, common: {}, footer: {}, header: {}, patient: {}, reflex: {}, report: {}, speech: {}, tympanometry: {} }
+        }
+        // find which data reach and then call corresponding update function
+        // get array of keys (audiogram, header, footer, ...)
+        let keys = Object.keys(data)
+        // if (keys.includes("header")) {
+
+        this.header?.update(data.header)
+        // }
+        // if (keys.includes("patient")) {
+        this.patient?.update(data.patient)
+        // }
+        // if (keys.includes("history")) {
+
+        this.history?.update(session?.history)
+        this.data.history = session.history;
+        // }
+        // if (keys.includes("audiogram")) {
+        this.RAudiogram?.update({ data: session.audiogram?.R, side: 'R' })
+        this.LAudiogram?.update({ data: session.audiogram?.L, side: 'L' })
+        this.data.audiogram = session.audiogram
+        // }
+        // if (keys.includes("speech")) {
+        this.RSpeech?.update(session.speech?.R)
+        this.LSpeech?.update(session.speech?.L)
+        this.data.speech = session.speech
+        // }
+        // if (keys.includes("tympanogram")) {
+        this.RTympanogram?.update(session.tympanogram?.R)
+        this.LTympanogram?.update(session.tympanogram?.L)
+        this.data.tympanogram = session.tympanogram;
+        // }
+        // if (keys.includes("reflex")) {
+        this.RReflex?.update(session.reflex?.R)
+        this.LReflex?.update(session.reflex?.L)
+        this.data.tympanogram = session.reflex;
+        // }
+        // if (keys.includes("report")) {
+        this.report?.update(session.report)
+        this.data.report = session.report;
+        // }
+        // if (keys.includes("footer")) {
+        // console.log("footer Data:", data?.footer);
+
+        this.footer?.update(data?.footer)
+        this.data.footer = data.footer;
+        // }
+    }
+
+    // خطوط نقطه چین مارجین فرم
+    drawMarginLines({ container, width, height }) {
+        // console.log(container.attributes.viewBox);
+
+        const style = `
+            stroke: black;
+			stroke-width: 0.3;
+			stroke-opacity: 0.5;
+            stroke-dasharray: 0.5;
+            fill: transparent;
+        `;
+        putRect({ container, x: 0, y: 0, width, height, style })
+        // Horizontal Lines
+        // putLine({
+        //     container: container, x1: 0, y1: margin.top,
+        //     x2: width, y2: margin.top, style: style, name: 'form-border'
+        // })
+        // putLine({
+        //     container: container, x1: 0, y1: height - margin.bottom,
+        //     x2: width, y2: height - margin.bottom, style: style, name: 'form-border'
+        // })
+        // // Vertical Lines
+        // putLine({
+        //     container: container, x1: margin.left, y1: 0,
+        //     x2: margin.left, y2: height, style: style, name: 'form-border'
+        // })
+        // putLine({
+        //     container: container, x1: width - margin.right, y1: 0,
+        //     x2: width - margin.right, y2: height, style: style, name: 'form-border'
+        // })
+        // // Middle Line
+        // putLine({
+        //     container: container, x1: width / 2, y1: 0,
+        //     x2: width / 2, y2: height, style: style, name: 'form-border'
+        // })
+    }
+}

package/src/Form/Form_N.js

@@ -0,0 +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;
+
+    }
+
+}

package/src/Form/Forms-Test.html

@@ -0,0 +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>
+
+</html>