hayun-vite 0.0.0 → 0.0.2

package/src/Form/templates/rasaAud.js

@@ -0,0 +1,287 @@
+import audDims from "../../Audiogram/dims.js";
+
+
+const templateRasaAud = {
+    name: 'rasa',
+    label: 'RasaAud',
+    backgroundImage: 'backgroundImage',
+    margin: { left: 0, top: 0, right: 0, bottom: 0 },
+    paper: { type: 'A4', case: 'portrait', width: 210, height: 296 },
+
+    // Printable Dimention
+    calc1: function () {
+        this.width = this.paper.width - (this.margin.left + this.margin.right);
+        this.height = this.paper.height - (this.margin.top + this.margin.bottom);
+        let width = this.width;
+        // ابعاد و پدینگ المنت ها
+        // فضای خالی
+        this.blank = {
+            name: 'blank',
+            w: width, h: 21,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.blank1 = {
+            name: 'blank',
+            w: width, h: 99,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.header = {
+            // hideContext: true,
+            name: 'header',
+            w: width, h: 20,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block',
+        }
+        this.patient = {
+            hideContext: true, // برچسب ها را ایجاد نمیکند
+            forceInsert: true, // مقادیر مختصات ورودی ها را از آبجکت جداگانه ای میگیرد
+            name: 'patient',
+            w: width, h: 22,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+        }
+        this.history = {
+            // hideContext: true,
+            name: 'history',
+            w: width, h: 10,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block',
+        }
+
+        this.RAudiogram = {}
+        Object.assign(this.RAudiogram,
+            audDims[this.name],
+            {
+                name: 'RAudiogram',
+                w: width / 2, h: 100,
+                margin: { left: 17, top: 18.5, right: 17.2, bottom: 11.5 },
+                display: 'inline',
+            });
+
+        this.LAudiogram = {}
+        Object.assign(this.LAudiogram,
+            audDims[this.name],
+            {
+                name: 'LAudiogram',
+                w: width / 2, h: 100, // پهنای سکشن هست
+                margin: { left: 17.7, top: 18.5, right: 16.8, bottom: 11.5 },
+                display: 'block',
+            });
+
+
+
+        this.RSpeech = {
+            name: 'RSpeech',
+            w: width / 2, h: 38.2,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'inline',
+            hideContext: true,
+            forceInsert: true,
+        }
+        this.LSpeech = {
+            name: 'LSpeech',
+            w: width / 2, h: 38.2,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+            hideContext: true,
+            forceInsert: true,
+        }
+        this.RTympanogram = {
+            name: 'RTympanogram',
+            w: width / 2, h: 60,
+            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            display: 'inline',
+        }
+        this.LTympanogram = {
+            name: 'LTympanogram',
+            w: width / 2, h: 60,
+            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            display: 'block',
+        }
+        this.RReflex = {
+            name: 'RReflex',
+            w: width / 2, h: 30,
+            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            display: 'inline'
+        }
+        this.LReflex = {
+            name: 'LReflex',
+            w: width / 2, h: 30,
+            margin: { left: 2, top: 2, right: 2, bottom: 2 },
+            display: 'block'
+        }
+        this.report = {
+            name: 'report',
+            w: width, h: 37.4,
+            margin: { left: 0, top: 0, right: 0, bottom: 0 },
+            display: 'block',
+            hideContext: true,
+            forceInsert: true
+        }
+        this.footer = {
+            name: 'footer',
+            w: width, h: 10,
+            margin: { left: 1, top: 1, right: 1, bottom: 1 },
+            display: 'block'
+        }
+    },
+
+    calc2: function () {
+        // let dims = this.dims;
+        let width, height;
+        //آیتم های روی این تمپلت
+        // روش جدید محاسبه ابعاد منطقی تر و تمیز تر
+        // Object.assign(this.header, {
+        //     width: this.getWidth(this.header),
+        //     height: this.getHeight(this.header),
+        // })
+        // New
+        width = this.header.width = this.getWidth(this.header)
+        height = this.header.height = this.getHeight(this.header)
+
+        this.header.elements = [
+            { type: 'line', x1: 0, y1: height, x2: width, y2: height },
+            { type: 'text', x: 30, y: 5, value: 'تاریخ :' },
+        ]
+        this.header.inputs = [
+            { name: 'officeName', x: width - 20, y: height - 10 },
+            { name: 'date', x: 20, y: 5 },
+        ]
+
+        width = this.patient.width = this.getWidth(this.patient)
+        this.patient.height = this.getHeight(this.patient)
+        this.patient.elements = [
+            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            { type: 'text', x: width, y: 5, value: 'نام:' },
+            { type: 'text', x: width - 30, y: 5, value: 'نام خانوادگی:' },
+            { type: 'text', x: width - 90, y: 5, value: 'سن:' },
+            { type: 'text', x: width - 130, y: 5, value: 'ارجاع از:' }
+        ]
+        this.patient.inputs = [
+            { name: 'name', x: width - 5, y: 5 },
+            { name: 'lastName', x: width - 47, y: 5 },
+            { name: 'age', x: width - 97, y: 5 },
+            { name: 'referrer', x: width - 142, y: 5 }
+        ]
+        this.patient.forceInputs = [
+            { name: 'name', x: width - 45, y: 12 },
+            { name: 'lastName', x: width - 75, y: 12 },
+            { name: 'age', x: width - 105, y: 12 },
+            { name: 'referrer', x: width - 150, y: 12 }
+        ]
+
+        width = this.history.width = this.getWidth(this.history)
+        this.history.height = this.getHeight(this.history)
+        this.history.elements = [
+            { type: 'line', x1: 0, y1: 20, x2: width, y2: 20 },
+            { type: 'text', x: width, y: 5, value: 'شرح حال:' },
+        ]
+        this.history.inputs = [
+            { name: 'description', x: width - 13, y: 5 },
+        ]
+
+        width = this.RAudiogram.width = this.getWidth(this.RAudiogram)
+        this.RAudiogram.height = this.getHeight(this.RAudiogram)
+
+        width = this.LAudiogram.width = this.getWidth(this.LAudiogram)
+        this.LAudiogram.height = this.getHeight(this.LAudiogram)
+
+        width = this.RSpeech.width = this.getWidth(this.RSpeech)
+        this.RSpeech.height = this.getHeight(this.RSpeech)
+        this.RSpeech.labels = ["SRT", "MCL", "SDS", 'UCL']
+        this.RSpeech.forceInputs = [
+            { name: 'SRT', x: 23, y: 26 },
+            { name: 'MCL', x: 35, y: 26 },
+            { name: 'SDS', x: 47, y: 26 },
+            { name: 'UCL', x: 59, y: 26 },
+        ]
+
+        width = this.LSpeech.width = this.getWidth(this.LSpeech)
+        this.LSpeech.height = this.getHeight(this.LSpeech)
+        this.LSpeech.labels = ["SRT", "MCL", "SDS", 'UCL']
+        this.LSpeech.forceInputs = [
+            { name: 'SRT', x: 33, y: 26 },
+            { name: 'MCL', x: 45, y: 26 },
+            { name: 'SDS', x: 57, y: 26 },
+            { name: 'UCL', x: 69, y: 26 },
+        ]
+
+        width = this.RTympanogram.width = this.getWidth(this.RTympanogram)
+        this.RTympanogram.height = this.getHeight(this.RTympanogram)
+        width = this.LTympanogram.width = this.getWidth(this.LTympanogram)
+        this.LTympanogram.height = this.getHeight(this.LTympanogram)
+
+        width = this.RReflex.width = this.getWidth(this.RReflex)
+        this.RReflex.height = this.getHeight(this.RReflex)
+        width = this.LReflex.width = this.getWidth(this.LReflex)
+        this.LReflex.height = this.getHeight(this.LReflex)
+
+        width = this.report.width = this.getWidth(this.report)
+        this.report.height = this.getHeight(this.report)
+        this.report.elements = [
+            { type: 'text', x: width, y: 5, value: 'گزارش:' },
+        ]
+        this.report.inputs = [
+            { name: 'description', x: width - 10, y: 5 },
+        ]
+        this.report.forceInputs = [
+            { name: 'description', x: width - 20, y: 14 },
+
+        ]
+
+
+        width = this.footer.width = this.getWidth(this.footer)
+        this.footer.height = this.getHeight(this.footer)
+        this.footer.elements = [
+            { type: 'line', x1: 0, y1: 0, x2: width, y2: 0 },
+            { type: 'text', x: width, y: 5, value: 'آدرس:' },
+            { type: 'text', x: width - 120, y: 5, value: 'تلفن:' },
+        ]
+        this.footer.inputs = [
+            { name: 'address', x: width - 10, y: 5 },
+            { name: 'tel', x: width - 128, y: 5 },
+        ]
+    },
+
+
+    getWidth: function (element) {
+        return (element.w - (element.margin.left + element.margin.right))
+    },
+    getHeight: function (element) {
+        return (element.h - (element.margin.top + element.margin.bottom))
+    },
+
+    calcSectionsArray: function () {
+        // این آرایه دقیقا ترتیب قرارگیری سکشن ها را بدون اون اوردر قبلی تعیین میکند
+        this.sections = [
+
+            // this.blank,
+            this.blank,
+            this.patient,
+            // this.blank1,
+
+            // this.history,
+            this.RAudiogram,
+            this.LAudiogram,
+            this.RSpeech, this.LSpeech,
+            // this.RTympanogram, this.LTympanogram,
+            // this.RReflex, this.LReflex,
+            this.report,
+            // this.footer
+
+        ]
+    },
+
+
+}
+
+templateRasaAud.calc1()
+templateRasaAud.calc2()
+templateRasaAud.calcSectionsArray()
+
+// پهنا و ارتفاع قابل استفاده منهای پد ها میشه پهنا و ارتفاع اصلی
+
+export default templateRasaAud;
+

package/src/main.js

@@ -1,74 +1,87 @@
-import './style.css'
-
-import AudiogramChart from "./Audiogram"
-import dims from './dims.js'
-
-
-// import javascriptLogo from './javascript.svg'
-// import viteLogo from '/vite.svg'
-// import { setupCounter } from './counter.js'
-
-// document.querySelector('#app').innerHTML = `
-//   <div>
-//     <a href="https://vite.dev" target="_blank">
-//       <img src="${viteLogo}" class="logo" alt="Vite logo" />
-//     </a>
-//     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-//       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
-//     </a>
-//     <h1>Hello Vite!</h1>
-//     <div class="card">
-//       <button id="counter" type="button"></button>
-//     </div>
-//     <p class="read-the-docs">
-//       Click on the Vite logo to learn more
-//     </p>
-//   </div>
-// `
-
-// setupCounter(document.querySelector('#counter'))
-
-
-document.querySelector('#app').innerHTML = `
-    <p>Mahdi</p>
-    <p>Ali Moosavi</p>
-    <div id="audiogram-div"></div>
- `
-
-const RAudiogram = new AudiogramChart({
-  container: document.getElementById('audiogram-div'),
-  dims: dims.display,
-  side: 'R', x: 0, y: 0,
-  width: 700, height: 800, events: true
-})
-
-const LAudiogram = new AudiogramChart({
-  container: document.getElementById('audiogram-div'),
-  dims: dims.display,
-  side: 'L', x: 0, y: 0,
-  width: 700, height: 800, events: true
-})
-
-RAudiogram.update({
-  data: {
-    // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
-    R_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
-    R_AC_NR: { 1500: 85 },
-    R_BC_M: { 2000: 25, 6000: 25 },
-    R_BC_M_NR: { 3000: 85 },
-    R_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
-  },
-  side: 'R',
-})
-
-LAudiogram.update({
-  data: {
-    // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
-    L_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
-    L_AC_NR: { 1500: 85 },
-    L_BC_M: { 2000: 25, 6000: 25 },
-    L_BC_M_NR: { 3000: 85 },
-    L_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
-  },
-  side: 'L',
-})
+// import './style.css'
+
+import AudiogramChart from "./Audiogram/Audiogram.js"
+import dims from './Audiogram/dims.js'
+import Forms from "./Form/Forms.js";
+import { officeData, patientData } from "../data/sampleData.js"
+
+
+// import javascriptLogo from './javascript.svg'
+// import viteLogo from '/vite.svg'
+// import { setupCounter } from './counter.js'
+
+// document.querySelector('#app').innerHTML = `
+//   <div>
+//     <a href="https://vite.dev" target="_blank">
+//       <img src="${viteLogo}" class="logo" alt="Vite logo" />
+//     </a>
+//     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+//       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+//     </a>
+//     <h1>Hello Vite!</h1>
+//     <div class="card">
+//       <button id="counter" type="button"></button>
+//     </div>
+//     <p class="read-the-docs">
+//       Click on the Vite logo to learn more
+//     </p>
+//   </div>
+// `
+
+// setupCounter(document.querySelector('#counter'))
+
+
+document.querySelector('#app').innerHTML = `
+    <button>Ok</button>
+    <button>Tok</button>
+    <p>Mahdi</p>
+    <h1>مهدی جاویدی پرنده پرکلاغی</h1>
+    <div id="forms-div"></div>
+    <div id="audiogram-div"></div>
+ `
+
+const forms = new Forms({ container: document.getElementById('forms-div'), name: 'form1' });
+forms.update({ officeData, patientData, sessionIndex: 0 })
+
+
+const RAudiogram = new AudiogramChart({
+  container: document.getElementById('audiogram-div'),
+  dims: dims.display,
+  side: 'R', x: 0, y: 0,
+  width: 700, height: 800, events: true
+})
+
+const LAudiogram = new AudiogramChart({
+  container: document.getElementById('audiogram-div'),
+  dims: dims.display,
+  side: 'L', x: 0, y: 0,
+  width: 700, height: 800, events: true
+})
+
+RAudiogram.update({
+  data: {
+    // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
+    R_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
+    R_AC_NR: { 1500: 85 },
+    R_BC_M: { 2000: 25, 6000: 25 },
+    R_BC_M_NR: { 3000: 85 },
+    R_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
+  },
+  side: 'R',
+})
+
+LAudiogram.update({
+  data: {
+    // R_AC_M: { 8000: 25, 2000: 5, 1500: 0, },
+    L_AC: { 1000: 25, 500: 15, 750: 20, 250: 10, 6000: 35, 2000: 45 },
+    L_AC_NR: { 1500: 85 },
+    L_BC_M: { 2000: 25, 6000: 25 },
+    L_BC_M_NR: { 3000: 85 },
+    L_BC: { 1000: 20, 500: 10, 750: 15, 250: 5, 4000: 20 },
+  },
+  side: 'L',
+})
+
+
+
+

package/src/note.html

@@ -0,0 +1 @@
+<div id="forms"></div>