hayun-vite 0.0.3 → 0.1.0

package/src/Form/Forms.js

@@ -1,135 +1,122 @@
-const svgNS = "http://www.w3.org/2000/svg";
-
-import printForm from "./printForm.js";
-import Form from "./Form.js";
-import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
-import rasaAud from "./templates/rasaAud.js";
-import rasaAudImage from './templates/rasaAud.png'
-// import '../fonts/Vazirmatn-Regular.woff2'
-import '../style.css'
- 
-// کلاس جدید که فرم‌های مختلف را نمایش میدهد
-export default class Forms {
-    constructor({ assets, 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: 'پرنده پرپر' });
-        const btn2 = this.putButton({ container: div, text: combo.label });
-        const printBtn = this.putButton({ container: div, text: 'Print', id: 'print' });
-
-        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
-        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
-        container.appendChild(this.div)
-
-        this.forms = []; // آرایه آبجکت های فرم های مختلف
-        this.forms.push(new Form({ container: this.div, template: rasaAud, image: rasaAudImage }));
-        this.forms.push(new Form({ container: this.div, template: combo }));
-
-        // انتخاب فرم پیش‌فرض  
-        this.forms[0].form.style.display = 'block';
-        this.selectedForm = this.forms[0]
-
-        // تعریف رویداد دکمه چاپ فرم نمایشی
-        printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) })
-
-        btn1.addEventListener('click', () => {
-            this.forms[1].form.style.display = 'none'
-            // this.forms[2].form.style.display = 'none'
-            this.forms[0].form.style.display = 'block';
-            this.selectedForm = this.forms[0];
-            this.update(this.allData);
-
-        });
-
-        btn2.addEventListener('click', () => {
-            this.forms[0].form.style.display = 'none'
-            // this.forms[2].form.style.display = 'none'
-            this.forms[1].form.style.display = 'block';
-            this.selectedForm = this.forms[1];
-            // آپدیت فرم انتخاب شده
-            this.update(this.allData);
-        });
-
-        // btn3.addEventListener('click', () => {
-        //     this.forms[0].form.style.display = 'none'
-        //     this.forms[1].form.style.display = 'none'
-        //     this.forms[2].form.style.display = 'block';
-        //     this.selectedForm = this.forms[2]
-        //     // آپدیت فرم انتخاب شده
-        //     this.update(this.allData);
-
-        // });
-        // for Develop
-        this.event();
-    }
-
-    event() {
-        this.div.addEventListener('click', (e) => {
-            console.log(e.target);
-        })
-    }
-    // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
-    update({ data, officeData, patientData, sessionIndex = 0 }) {
-        // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده
-        this.allData = { data, officeData, patientData, sessionIndex }
-        this.selectedForm.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
-        //     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 Form from "./Form.js";
+import combo from "./templates/combo.js"; // این در حقیقیت یک تمپلت هست
+import rasaAud from "./templates/rasaAud.js";
+import rasaAudImage from './templates/rasaAud.png'
+// خط کد زیر لازم هست
+import '../fonts/Vazirmatn-Regular.woff2'
+import '../style.css'
+ 
+// کلاس جدید که فرم‌های مختلف را نمایش میدهد
+export default class Forms {
+    constructor({ assets, container } = {}) {
+        // ایجاد یک دیو برای قرار دادن دکمه ها و لینک های فرم
+        const div = document.createElement('div');
+        div.style = 'border: 1px solid brown; margin: 0; padding: 0;'
+        container.appendChild(div);
+        // اضافه کردن دکمه به دیو فرم
+        let className = 'persian';
+        const btn =[];
+        btn[0] = this.putButton({ container: div, text: rasaAud.label, className });
+        btn[1] = this.putButton({ container: div, text: combo.label, className });
+        const printBtn = this.putButton({ container: div, text: 'Print', id: 'print' });
+
+        // یک دیو تعریف میکنیم که سمت ادیولاگ برای تعریف لیستنر استفاده می‌شود
+        this.div = document.createElement('div'); // این بخش فقط شامل بخش اس‌وی‌جی هست
+        container.appendChild(this.div)
+
+        this.forms = []; // آرایه آبجکت های فرم های مختلف
+        this.forms.push(new Form({ container: this.div, template: rasaAud, image: rasaAudImage }));
+        this.forms.push(new Form({ container: this.div, template: combo }));
+
+        // انتخاب فرم پیش‌فرض  
+        this.forms[1].form.style.display = 'block';
+        this.selectedForm = this.forms[1]
+        btn[1].style.backgroundColor = ' #1c15e1'
+
+
+        // تعریف رویداد دکمه چاپ فرم نمایشی
+        printBtn.addEventListener('click', () => { printForm({ container: this.selectedForm.form }) })
+
+        btn[0].addEventListener('click', () => {
+            this.forms[1].form.style.display = 'none'
+            btn[1].style.backgroundColor = ' #7472e2'
+             
+            // this.forms[2].form.style.display = 'none'
+            this.forms[0].form.style.display = 'block';
+            btn[0].style.backgroundColor = ' #1c15e1'
+
+            this.selectedForm = this.forms[0];
+            this.update(this.allData);
+
+        });
+
+        btn[1].addEventListener('click', () => {
+            this.forms[0].form.style.display = 'none'
+            btn[0].style.backgroundColor = ' #7472e2'
+
+            // this.forms[2].form.style.display = 'none'
+            this.forms[1].form.style.display = 'block';
+            btn[1].style.backgroundColor = ' #1c15e1'
+
+            this.selectedForm = this.forms[1];
+            // آپدیت فرم انتخاب شده
+            this.update(this.allData);
+        });
+
+        // btn3.addEventListener('click', () => {
+        //     this.forms[0].form.style.display = 'none'
+        //     this.forms[1].form.style.display = 'none'
+        //     this.forms[2].form.style.display = 'block';
+        //     this.selectedForm = this.forms[2]
+        //     // آپدیت فرم انتخاب شده
+        //     this.update(this.allData);
+
+        // });
+        // for Develop
+        this.event();
+    }
+
+    event() {
+        this.div.addEventListener('click', (e) => {
+            console.log(e.target);
+        })
+    }
+    // این تابع یک بار از بیرون کلاس فراخوانی میشه و یک بار وقتی از داخل تمپلت فرم را عوض میکنیم
+    update({ data, officeData, patientData, sessionIndex = 0 }) {
+        // ذخیره کل دیتا برای استفاده داخلی آپدیت فرم انتخاب شده
+        this.allData = { data, officeData, patientData, sessionIndex }
+        this.selectedForm.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, className }) {
+       
+        const button = document.createElement('button');
+        button.setAttribute('id', id);
+        className && button.setAttribute('class', className);
+        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/Header.js

@@ -1,92 +1,92 @@
-import putLine from "../common/putLine.js";
-import putRect from "../common/putRect.js";
-import putText from "../common/putText.js";
-const svgNS = "http://www.w3.org/2000/svg";
-
-export default class Header {
-    constructor({ container }) {
-        this.container = container;
-    }
-
-    draw({ dims, stroke = true }) {
-
-        this.inputs = dims.inputs
-        let value;
-        let width = dims.width;
-        let height = dims.height;
-        let x = dims.margin.left;
-        let y = dims.margin.top;
-
-        const svg = document.createElementNS(svgNS, "svg");
-        svg.setAttribute("x", x);
-        svg.setAttribute("y", y);
-        svg.setAttribute("width", width);
-        svg.setAttribute("height", height);
-        svg.setAttribute('style', 'direction: rtl !important; user-select: none;')
-
-        // Logo 
-        let image = document.createElementNS(svgNS, "image");
-        image.setAttribute("data-name", "officeLogo")
-        image.setAttribute("width", "17");
-        image.setAttribute("height", "17");
-        image.setAttribute("x", width - 16);
-        image.setAttribute("y", 0.5);
-        svg.appendChild(image);
-
-        let style = `
-            user-select: none;
-            direction: rtl;
-            /* text-align: center; */
-            font-family: vazirmatn;
-            font-size: 0.8mm;
-            font-weight: bolder;
-            text-anchor: start; /*تراز افقی*/
-            dominant-baseline: auto; /* تراز عمودی*/  
-        `;
-
-        // اگر مقدار استروک درست بود لیبل ها را چاپ کن
-        if (!dims.hideContext) {
-            dims.elements.forEach(element => {
-                switch (element.type) {
-                    case 'text':
-                        ({ x, y, value } = element);
-
-                        putText({ container: svg, value, x, y, style: style });
-                        break;
-                    case 'line':
-                        let { x1, y1, x2, y2 } = element;
-                        putLine({ container: svg, x1, y1, x2, y2 });
-                        break;
-                }
-            });
-        }
-
-        style = `
-            font-family: Arial, Helvetica, sans-serif !important;
-            font-size: 0.8mm;
-            font-weight: bold;
-            text-anchor: start; /*تراز افقی*/
-            /* dominant-baseline: middle; /* تراز عمودی*/       
-        `;
-        // محل اینپوت‌های دیتا
-        let name;
-        dims.inputs.forEach(input => {
-            ({ name, x, y } = input);
-            putText({ container: svg, x, y, style: style, name });
-        });
-
-        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
-        const borderRect = putRect({ container: svg, x: 0, y: 0, width, height, name: "header" });;
-        this.borderRect = borderRect;
-        this.container.appendChild(svg);
-        // this.header = svg;
-    }
-
-    update(data) {
-        this.container.querySelector("[data-name=officeName]").innerHTML = data?.officeName || "";
-        this.container.querySelector("[data-name=date]").innerHTML = data?.createDate || "";
-        this.container.querySelector("[data-name=officeLogo]").setAttribute("href", data?.officeLogo || "");
-
-    }
-
+import putLine from "../common/putLine.js";
+import putRect from "../common/putRect.js";
+import putText from "../common/putText.js";
+const svgNS = "http://www.w3.org/2000/svg";
+
+export default class Header {
+    constructor({ container }) {
+        this.container = container;
+    }
+
+    draw({ dims, stroke = true }) {
+
+        this.inputs = dims.inputs
+        let value;
+        let width = dims.width;
+        let height = dims.height;
+        let x = dims.margin.left;
+        let y = dims.margin.top;
+
+        const svg = document.createElementNS(svgNS, "svg");
+        svg.setAttribute("x", x);
+        svg.setAttribute("y", y);
+        svg.setAttribute("width", width);
+        svg.setAttribute("height", height);
+        svg.setAttribute('style', 'direction: rtl !important; user-select: none;')
+
+        // Logo 
+        let image = document.createElementNS(svgNS, "image");
+        image.setAttribute("data-name", "officeLogo")
+        image.setAttribute("width", "17");
+        image.setAttribute("height", "17");
+        image.setAttribute("x", width - 16);
+        image.setAttribute("y", 0.5);
+        svg.appendChild(image);
+
+        let style = `
+            user-select: none;
+            direction: rtl;
+            /* text-align: center; */
+            font-family: vazirmatn;
+            font-size: 0.8mm;
+            font-weight: bolder;
+            text-anchor: start; /*تراز افقی*/
+            dominant-baseline: auto; /* تراز عمودی*/  
+        `;
+
+        // اگر مقدار استروک درست بود لیبل ها را چاپ کن
+        if (!dims.hideContext) {
+            dims.elements.forEach(element => {
+                switch (element.type) {
+                    case 'text':
+                        ({ x, y, value } = element);
+
+                        putText({ container: svg, value, x, y, style: style });
+                        break;
+                    case 'line':
+                        let { x1, y1, x2, y2 } = element;
+                        putLine({ container: svg, x1, y1, x2, y2 });
+                        break;
+                }
+            });
+        }
+
+        style = `
+            font-family: Arial, Helvetica, sans-serif !important;
+            font-size: 0.8mm;
+            font-weight: bold;
+            text-anchor: start; /*تراز افقی*/
+            /* dominant-baseline: middle; /* تراز عمودی*/       
+        `;
+        // محل اینپوت‌های دیتا
+        let name;
+        dims.inputs.forEach(input => {
+            ({ name, x, y } = input);
+            putText({ container: svg, x, y, style: style, name });
+        });
+
+        // مربع احاطه‌کننده کل جدول برای راهنمای توسعه
+        const borderRect = putRect({ container: svg, x: 0, y: 0, width, height, name: "header" });;
+        this.borderRect = borderRect;
+        this.container.appendChild(svg);
+        // this.header = svg;
+    }
+
+    update(data) {
+        this.container.querySelector("[data-name=officeName]").innerHTML = data?.officeName || "";
+        this.container.querySelector("[data-name=date]").innerHTML = data?.createDate || "";
+        this.container.querySelector("[data-name=officeLogo]").setAttribute("href", data?.officeLogo || "");
+
+    }
+
 }