hayun-vite 1.2.0 → 1.4.0

package/index.html

@@ -21,36 +21,51 @@
 		import speechUI from "/src/Speech/SpeechUI.js"
 		import formsUI from "/src/Forms/FormsUI.js"
 		import reflexUI from "/src/Reflex/ReflexUI.js"
+		import tympanogramUI from "/src/Tympanogram/TympanogramUI"
+		import audiogramUI from "/src/Audiogram/AudiogramUI"
+
 
 		const { appSettingData, officeData, patientData } = currentData
-		let data = patientData.sessions[0].speech
-		speechUI.draw({ containerId: '#app' })
-		speechUI.update({ data })
 
-		// فراخوانی متد آپدیت بدون پارامتر مقادیر وارد شده کاربر را به دیتاآبجکت جاری میفرستد
+		let data
+		data = patientData.sessions[0].audiogram
+		audiogramUI.draw({ containerId: '#app' })
+		audiogramUI.update({ data })
+
+
+		// data = patientData.sessions[0].speech
+		// speechUI.draw({ containerId: '#app' })
+		// speechUI.update({ data })
+		// // فراخوانی متد آپدیت بدون پارامتر مقادیر وارد شده کاربر را به دیتاآبجکت جاری میفرستد
 		// setInterval(() => { speechUI.update() }, 3000);
 
-		// Accoustic Reflexes Section
-		data = patientData.sessions[0].reflex
-		reflexUI.draw({ containerId: '#app' })
-		reflexUI.update({ data })
+		// data = patientData.sessions[0].tympanogram
+		// tympanogramUI.draw({ containerId: '#app' })
+		// tympanogramUI.update({ data })
+		// setInterval(() => { tympanogramUI.update() }, 2000);
 
-		// formsUI Section
-		// data = patientData.sessions[0]
-		// formsUI.draw({ containerId: '#app' })
-		// formsUI.update({ patientData, sessionIndex: 0 })
 
-		// setInterval(() => {
-		// 	formsUI.update({ patientData, sessionIndex: 0 })
-		// 	console.log('forms update!');
 
-		// }, 2000)
 
 
-		// document.querySelector('#log').addEventListener('click', () => {
-		// 	console.log(data.R, data.L);
 
-		// })
+		// Accoustic Reflexes Section
+		// data = patientData.sessions[0].reflex
+		// reflexUI.draw({ containerId: '#app' })
+		// reflexUI.update({ data })
+		// setInterval(() => { reflexUI.update() }, 3000);
+
+
+
+		// formsUI Section
+		data = patientData.sessions[0]
+		formsUI.draw({ containerId: '#app' })
+		formsUI.update({ patientData, sessionIndex: 0 })
+
+		setInterval(() => {
+			formsUI.update({ patientData, sessionIndex: 0 })
+			console.log('forms update!');
+		}, 2000)
 
 
 	</script>

package/index.js

@@ -20,6 +20,9 @@ import logo2 from './assets/logos/logo-2.png'
 import Speech from './src/Speech/Speech'
 // import { ReflexUI } from './src/components'
 import speechUI from './src/Speech/SpeechUI'
+import reflexUI from './src/Reflex/ReflexUI'
+import tympanogramUI from './src/Tympanogram/TympanogramUI'
+import audiogramUI from './src/Audiogram/AudiogramUI'
 
 const logos = [logo0, logo1, logo2]
 
@@ -28,6 +31,6 @@ const logos = [logo0, logo1, logo2]
 
 export {
     Audiogram, Forms, dims, currentData, combo_template,
-    logos, Speech, speechUI, formsUI
+    logos, Speech, speechUI, reflexUI, tympanogramUI, formsUI, audiogramUI
 
 } 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hayun-vite",
   "private": false,
-  "version": "1.2.0",
+  "version": "1.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/Audiogram/Audiogram.js

@@ -444,7 +444,7 @@ export default class Audiogram {
 		// پاک کردن نودهای سمبل دیتای قبلی در صورت وجود از نود مربوطه
 		this.svg.querySelectorAll('[data-name=symbol]').forEach(symbol => symbol.remove())
 		// پاک کردن خطوط اتصال دیتای قبلی در صورت وجود از نود مربوطه
-		this.svg.querySelectorAll('[data-name=junction]').forEach(symbol => symbol.remove())
+		this.svg.querySelectorAll('[data-name=junction]').forEach(line => line.remove())
 
 		const junctions = { AC: {}, BC: {}, side };
 		this.junctions = junctions;

package/src/Audiogram/AudiogramUI.js

@@ -0,0 +1,66 @@
+import Audiogram from "./Audiogram";
+
+class AudiogramUI {
+	constructor() {
+		this.data = { R: '', L: '' }
+	}
+
+	draw({ containerId = '#app' } = {}) {
+
+		document.querySelector(containerId).insertAdjacentHTML('beforeend', `
+			<div class="center border">
+				<section id="r-audiogram"></section>
+				<section id="l-audiogram"></section>
+			</div>
+		`);
+
+
+		const dims = {
+			"blank": false,
+			"name": "RAudiogram",
+			"w": 100,
+			"h": 90,
+			"margin": {
+				"left": 1,
+				"top": 1,
+				"right": 1,
+				"bottom": 1
+			},
+			"display": "inline",
+			"borderBox": "display",
+			"width": 600,
+			"height": 600
+		}
+		this.rcontainer = document.getElementById('r-audiogram')
+		this.rchart = new Audiogram({ container: this.rcontainer, side: 'R', dims })
+
+
+		this.lcontainer = document.getElementById('l-audiogram')
+		this.lchart = new Audiogram({ container: this.lcontainer, side: 'L', dims })
+
+	}
+
+	update({ data } = {}) {
+
+		this.rchart.update({ data: data.R, side: 'R' })
+		this.lchart.update({ data: data.L, side: 'L' })
+		// if (data) {
+		// 	this.rchart.update(data.R, this.rcontainer)
+		// 	this.lchart.update(data.L, this.lcontainer)
+		// 	this.data = { R: data.R, L: data.L }
+		// } else
+		// // اگر این تابع بدون پارامتر فراخوانی شود مقادیر اینپوت کاربر گرفته و دیتاآبجکت را آپدیت کند
+		// {
+		// 	console.log('without param');
+
+		// 	this.rchart.fetchInputUserData()
+		// 	this.lchart.fetchInputUserData()
+		// 	this.data.R = this.rchart.data
+		// 	this.data.L = this.lchart.data
+		// }
+
+	}
+}
+
+export default new AudiogramUI()
+

package/src/Reflex/Reflex.js

@@ -116,10 +116,20 @@ export default class Reflex {
     }
 
     // جایگذاری داده های رفلکس
-    update(data) {
+    update(data, container) {
+
+        this.data = data
+
+        // انتخاب اینکه اینپوت های کاربر را آپدیت کنه یا اس وی جی تکست ها رو
+        // بر حسب اینکه پارامتر کانتینر باشه یا نباشه
+        const prop = container ? 'value' : 'textContent'
+        const elem = container ? 'input' : 'text';
+        !container && (container = this.chart);
+
         for (const key in data) {
             for (const freq in data[key]) {
-                this.chart.querySelector(`text[name=${key}-${freq}]`).innerHTML = data?.[key]?.[freq] || "";
+                container.querySelector(`${elem}[name=${key}-${freq}]`)[prop] = data?.[key]?.[freq] || "";
+                // container.querySelector(`${elem}[name=${label}]`)[prop] = data?.[label] || "";
             }
         }
     }
@@ -169,4 +179,21 @@ export default class Reflex {
         })
         // firstInput.focus()
     }
+
+    // دریافت دیتای کاربر از اینپوت ها و جایگزین کردن در دیتای آبجکت کلاس
+    // تغییر این دیتا باعث تغییر دیتای جاری می‌شود. چون آبجکت ها اشاره گر هستن
+    fetchInputUserData() {
+        [500, 1000, 2000, 4000].
+            forEach(freq => {
+                const value = this.container.querySelector(`input[name=ipsi-${freq}]`).value
+                this.data.ipsi[freq] = value // جایگزین کردن پراپرتی آبجکت دیتای جاری و اینجا
+            });
+
+        [500, 1000, 2000, 4000].
+            forEach(freq => {
+                const value = this.container.querySelector(`input[name=contra-${freq}]`).value
+                this.data.contra[freq] = value // جایگزین کردن پراپرتی آبجکت دیتای جاری و اینجا
+            });
+
+    }
 }

package/src/Reflex/ReflexUI.js

@@ -41,11 +41,11 @@ class ReflexUI {
         this.rchart = new Reflex({ container: this.rcontainer, dims, side: 'R' })
 
         // فراخوانی متد ایجاد اینپوت روی چارت اسپیچ
-        // this.rchart.createUserInput({ container: this.rcontainer })
+        this.rchart.createUserInput({ container: this.rcontainer })
 
         this.lcontainer = document.getElementById('l-reflex')
         this.lchart = new Reflex({ container: this.lcontainer, dims, side: 'L' })
-        // this.lchart.createUserInput({ container: this.lcontainer })
+        this.lchart.createUserInput({ container: this.lcontainer })
 
     }
 
@@ -57,12 +57,13 @@ class ReflexUI {
         } else
         // اگر این تابع بدون پارامتر فراخوانی شود مقادیر اینپوت کاربر گرفته و دیتاآبجکت را آپدیت کند
         {
-            console.log('without param');
 
-            // this.rchart.fetchInputUserData()
-            // this.lchart.fetchInputUserData()
-            // this.data.R = this.rchart.data
-            // this.data.L = this.lchart.data
+            this.rchart.fetchInputUserData()
+            this.lchart.fetchInputUserData()
+            this.data.R = this.rchart.data
+            this.data.L = this.lchart.data
+            console.log('without param', this.data.R);
+
         }
 
     }

package/src/Speech/Speech.js

@@ -169,9 +169,6 @@ export default class Speech {
             font-family: Vazirmatn;
         `
         const color = (this.side === 'R') ? 'crimson' : 'blue';
-        // ایجاد یک المنت اینپوت
-        // let input
-        // آماده سازی اولین نود اینپوت از داکیومنت و سپس ساختن بقیه نودها از روی آن
         // const firstInput = input // نگهداری اولین اینپوت برای برگشت و فوکوس کردن بهش
         let inputDims = this.inputDims
 

package/src/Tympanogram/Tympanogram.js

@@ -161,12 +161,13 @@ export default class Tympanogram {
             { name: 'MEP', x: getX(-300), y: getY(compliance.min), dy: 10, dx: 11 },
             { name: 'SC', x: getX(0), y: getY(compliance.min), dy: 10, dx: 8 },
             { name: 'G', x: getX(300), y: getY(compliance.min), dy: 10, dx: 4 },
-            { name: 'type', x: getX(-500), y: getY(2.5), dx: 9, dy: 0 },
+            { name: 'type', x: getX(-490), y: getY(2.5), dx: 9, dy: 0 },
         ]
             .forEach(input => {
                 const { name, x, y, dx, dy } = input
                 putText({ container: svg, value, style, name, x, y, dx, dy })
-                this.inputDims.push({ name, x: (x + dx + padding.left) * kx, y: (y + dy + padding.top) * ky })
+                // نگهداری مختصات اینپوت ها برای استفاده بعدی 
+                this.inputDims.push({ name, x: (x + dx + padding.left + 4) * kx, y: (y + dy + padding.top) * ky })
                 // putPoint({ container: svg, x, y, dx, dy, r: 0.8, fill: 'brown' })
             });
 
@@ -232,8 +233,16 @@ export default class Tympanogram {
         }
     }
 
-    update(data) {
+    update(data, container) {
         this.data = data
+        // انتخاب اینکه اینپوت های کاربر را آپدیت کنه یا اس وی جی تکست ها رو
+        // بر حسب اینکه پارامتر کانتینر باشه یا نباشه
+        const prop = container ? 'value' : 'textContent'
+        const elem = container ? 'input' : 'text';
+        !container && (container = this.chart);
+
+        // container.querySelector(`${elem}[name=${label}]`)[prop] = data?.[label] || "";
+
 
         let { ECV, SC, MEP, G } = data
 
@@ -243,21 +252,22 @@ export default class Tympanogram {
         G && (G = (+G).toFixed(2));
 
         // جایگذاری مقادیر تمپانومتری در تکست‌باکس ها
-        this.chart.querySelector(`text[name="type"]`).innerHTML = data?.type || "-";
-        this.chart.querySelector(`text[name="ECV"]`).innerHTML = ECV || "-";
-        this.chart.querySelector(`text[name="MEP"]`).innerHTML = data?.MEP || "-";
-        this.chart.querySelector(`text[name="SC"]`).innerHTML = SC || "-";
-        this.chart.querySelector(`text[name="G"]`).innerHTML = G || "-";
-        // پاک کردن منحنی قبلی از کانتینر جاری
-        // console.log(this.chart.querySelector(`path[name="curve"]`));
+        container.querySelector(`${elem}[name="type"]`)[prop] = data?.type || "-";
+        container.querySelector(`${elem}[name="ECV"]`)[prop] = ECV || "";
+        container.querySelector(`${elem}[name="MEP"]`)[prop] = data?.MEP || "";
+        container.querySelector(`${elem}[name="SC"]`)[prop] = SC || "";
+        container.querySelector(`${elem}[name="G"]`)[prop] = G || "";
 
-        this.chart.querySelector(`path[name="curve"]`)?.remove();
         // رسم منحنی
         this.drawCurve(data);
     }
 
     // توابع داخلی
     drawCurve(data) {
+
+        // پاک کردن منحنی قبلی از کانتینر جاری
+        this.chart.querySelector(`path[name="curve"]`)?.remove();
+
         let { type, ECV, SC, MEP, G, expanded, cp, cpp } = data
 
         // Ensure to Convert to Numbers //
@@ -377,45 +387,68 @@ export default class Tympanogram {
         }
     }
 
-    // ایجاد اینپوت‌های کاربر در کانتینر چارت
     createUserInput({ container }) {
         // استایل دهی نسبی به کانتینر
         container.style.position = 'relative'
-        // ایجاد یک المنت اینپوت
-        let input = document.createElement('input')
-        input.name = 'SAT'
-        input.type = 'text'
-        input.maxLength = 4
-        input.autocomplete = 'off'
-        input.placeholder = '---'
-        const width = 70 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
-        const height = 25 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+        const width = 60 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+        const height = 30 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+
         let style = `
-            margin: 0;
-            padding: 0;
-            text-align: center;
-            font-size: 24px;
-            font-weight: bold;
-            color: crimson;
-            position: absolute;
+            all: revert;
             width: ${width}px;
             height: ${height}px;
+            box-sizing: border-box;
             border: none;
+            /* Ensures padding doesn't increase height */
+            position: absolute;
+            padding-top: 4px;
+            text-align: center;
+            font-size: 24px;
+            font-weight: bold;
+            font-family: Vazirmatn;
         `
-        input.style = style
-        // آماده سازی اولین نود اینپوت از داکیومنت و سپس ساختن بقیه نودها از روی آن
-        const firstInput = input // نگهداری اولین اینپوت برای برگشت و فوکوس کردن بهش
+        const color = (this.side === 'R') ? 'crimson' : 'blue';
+        // const firstInput = input // نگهداری اولین اینپوت برای برگشت و فوکوس کردن بهش
         let inputDims = this.inputDims
-        input.style.color = (this.side === 'R') ? 'crimson' : 'blue';
 
         inputDims.forEach(dims => {
+            const input = document.createElement('input')
+            // input.className = 'user-input'
+            input.name = dims.name
+            input.type = 'text'
+            input.maxLength = 4
+            input.autocomplete = 'off'
+            input.placeholder = '---'
+            input.style = style
+            input.style.color = color
             input.style.left = dims.x - width / 2 + 'px'
             input.style.top = dims.y - height / 2 + 'px'
-            input.setAttribute('name', dims.name)
             container.appendChild(input)
-            input = input.cloneNode() // در آخر  یک المنت اضافه ایجاد شده است - باگ بی آزار
+            // input = input.cloneNode() // در آخر  یک المنت اضافه ایجاد شده است - باگ بی آزار
         })
 
-        firstInput.focus()
+        //افزودن رویداد به اینپوت ها
+        this.createUserInputEvent()
+        // firstInput.focus()
+    }
+
+    // دریافت دیتای کاربر از اینپوت ها و جایگزین کردن در دیتای آبجکت کلاس
+    // تغییر این دیتا باعث تغییر دیتای جاری می‌شود. چون آبجکت ها اشاره گر هستن
+    fetchInputUserData() {
+        ['type', 'ECV', 'MEP', 'SC', 'G'].forEach(name => {
+            const value = this.container.querySelector(`input[name= ${name}]`).value
+            this.data[name] = value // جایگزین کردن پراپرتی آبجکت دیتای جاری و اینجا
+        })
+    }
+
+    createUserInputEvent() {
+        ['type', 'ECV', 'MEP', 'SC', 'G'].forEach(name => {
+            this.container.querySelector(`input[name= ${name}]`).
+                addEventListener('change', (e) => {
+                    console.log(e.target.value)
+                    this.fetchInputUserData() // همه مقادیر اینپوت ها میگیره و دیتای کلاس رو به روز میکنه
+                    this.drawCurve(this.data) // رسم مجدد منحنی با دیتای جدید
+                })
+        })
     }
 }

package/src/Tympanogram/TympanogramUI.js

@@ -1,166 +1,188 @@
-import { BaseComponent } from "../core/BaseComponent.js";
-import Tympanogram from "../Tympanogram/Tympanogram";
-
-
-export class TympanogramUI extends BaseComponent {
-  constructor(selector, props = {}) {
-    super(selector, props);
-  }
-
-  render() {
-    this.element.innerHTML = `
-      <h1 class="center">Tympanograms</h1>
-      <div class="center">
-        <div>
-          <h2 class="center red">Right</h2>
-          <section id="r-tympanogram" style="position: relative;">
-            <input type="text" name="type" maxlength="4" placeholder="---" autocomplete="off" />
-          </section>
-          <section name="r-tympanogram">
-            <p>Curve settings:</p>
-            <input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
-            <label for="cp">cp</label>
-            <input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
-            <label for="cpp">cpp</label>
-            <div>
-              <input type="checkbox" name="extra-sc" id="r-extra-sc">
-              <label for="r-extra-sc">Extra SC</label>
-            </div>
-            <div>
-              <input type="checkbox" name="compensated" id="r-compensated">
-              <label for="r-compensated">Compensated</label>
-            </div>
-          </section>
-        </div>
-
-        <div>
-          <h2 class="center blue">Left</h2>
-          <section id="l-tympanogram" style="position: relative;">
-            <input type="text" name="type" maxlength="4" placeholder="---" autocomplete="off" />
-          </section>
-          <section name="l-tympanogram">
-            <p>Curve settings:</p>
-            <input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
-            <label for="cp">cp</label>
-            <input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
-            <label for="cpp">cpp</label>
-            <div>
-              <input type="checkbox" name="extra-sc" id="l-extra-sc">
-              <label for="l-extra-sc">Extra SC</label>
-            </div>
-            <div>
-              <input type="checkbox" name="compensated" id="l-compensated">
-              <label for="l-compensated">Compensated</label>
-          </section>
-        </div>
-      </div>
-    `;
-    let dims = {
-      "name": "RTympanogram",
-      "w": 100,
-      "h": 60,
-      "margin": {
-        "left": 2,
-        "top": 0,
-        "right": 2,
-        "bottom": 0
-      },
-      "display": "inline",
-      "width": 100 * 6,
-      "height": 60 * 6,
-    }
-
-    let data = {
-      type: "An",
-      ECV: '1.30',
-      SC: '0.80',
-      MEP: '-130',
-      G: 0.2,
-      expanded: false, // by default is false for expand pressure from -600 to +400
-
-    }
-
-    let cp = 70, cpp = 5, extraCompliance, compensated
-
-    const width = 50 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
-    const height = 25 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
-
-    let style = `
-     margin: 0;
-     padding: 0;
-     text-align: center;
-     font-size: 22px;
-     font-weight: bold;
-     color: crimson;
-     position: absolute;
-     width: ${width}px;
-     height: ${height}px;
-     border: none;
-   `
-    insertInputs({ containerID: 'r-tympanogram', side: 'R', dims, style }).focus()
-
-    insertInputs({ containerID: 'l-tympanogram', side: 'L', dims, style })
-
-
-    function insertInputs({ containerID, side, dims, style }) {
-      let container = document.getElementById(containerID)
-      const tympanogram = new Tympanogram({ container, dims, side })
-      tympanogram.update(data)
-
-      let input = container.querySelector('[name=type]')
-      const firstInput = input // اولین اینپوت 
-
-      let inputDims = tympanogram.inputDims
-      input.style = style
-      input.style.color = (side === 'R') ? 'crimson' : 'blue';
-      input.style.left = inputDims[0].x - width / 2 + 'px'
-      input.style.top = inputDims[0].y - height / 2 + 'px'
-      inputDims.shift() // حذف اولین عنصر آرایه بخاط اینکه استفاده شد در نود بالایی
-
-      inputDims.forEach(dims => {
-        input = input.cloneNode()
-        input.style.left = dims.x - width / 2 + 'px'
-        input.style.top = dims.y - height / 2 + 'px'
-        input.setAttribute('name', dims.name)
-        container.appendChild(input)
-      })
-
-      container = document.querySelector(`[name=${containerID}]`)
-      container.querySelector("[name=compensated]").addEventListener("input", e => {
-        compensated = e.target.checked
-        console.log(e.target.checked);
-        dims = { ...dims, compensated }
-        tympanogram.draw({ dims })
-      })
-
-      container.querySelector("[name=extra-sc]").addEventListener("input", e => {
-        extraCompliance = e.target.checked
-        console.log(e.target.checked);
-        dims = { ...dims, extraCompliance }
-        tympanogram.draw({ dims })
-      })
-
-      container.querySelector("#cp").addEventListener("input", e => {
-        cp = e.target.value
-        console.log(cp);
-        data = { ...data, cp }
-        tympanogram.update(data)
-      })
-
-      container.querySelector("#cpp").addEventListener("input", e => {
-        cpp = e.target.value
-        console.log(cpp);
-        data = { ...data, cpp }
-        tympanogram.update(data)
-      })
-
-      return firstInput
-    }
-
-
-  }
-
-  bindEvents() {
-
-  }
+import Tympanogram from "./Tympanogram";
+
+class TympanogramUI {
+	constructor() {
+		this.data = { R: '', L: '' }
+	}
+
+	draw({ containerId = '#app' } = {}) {
+
+		document.querySelector(containerId).insertAdjacentHTML('beforeend', `
+			<div name="tympanograms">
+				<h1 class="center title">Tympanograms</h1>
+				<div class="center">
+					<div>
+						<h2 class="center side red">Right</h2>
+						<section id="r-tympanogram"></section>
+						<section name="r-tympanogram">
+							<p>Curve settings:</p>
+							<input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
+							<label for="cp">cp</label>
+							<input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
+							<label for="cpp">cpp</label>
+							<div>
+								<input type="checkbox" name="extra-sc" id="r-extra-sc">
+								<label for="r-extra-sc">Extra SC</label>
+							</div>
+							<div>
+								<input type="checkbox" name="compensated" id="r-compensated">
+								<label for="r-compensated">Compensated</label>
+							</div>
+						</section>
+					</div>
+
+					<div>
+						<h2 class="center side blue">Left</h2>
+						<section id="l-tympanogram"></section>
+						<section name="l-tympanogram">
+							<p>Curve settings:</p>
+							<input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
+							<label for="cp">cp</label>
+							<input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
+							<label for="cpp">cpp</label>
+							<div>
+								<input type="checkbox" name="extra-sc" id="l-extra-sc">
+								<label for="l-extra-sc">Extra SC</label>
+							</div>
+							<div>
+								<input type="checkbox" name="compensated" id="l-compensated">
+								<label for="l-compensated">Compensated</label>
+						</section>
+					</div>
+				</div>
+			</div>
+		`);
+
+		this.dims = {
+			"name": "RTympanogram",
+			"w": 100,
+			"h": 60,
+			"margin": {
+				"left": 2,
+				"top": 0,
+				"right": 2,
+				"bottom": 0
+			},
+			"display": "inline",
+			"width": 100 * 6,
+			"height": 60 * 6,
+		}
+
+		// let data = {
+		// 	type: "An",
+		// 	ECV: '1.30',
+		// 	SC: '0.80',
+		// 	MEP: '-130',
+		// 	G: 0.2,
+		// 	expanded: false, // by default is false for expand pressure from -600 to +400
+
+		// }
+		const dims = this.dims
+		
+
+		const width = 50 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+		const height = 25 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+
+		let style = `
+			margin: 0;
+			padding: 0;
+			text-align: center;
+			font-size: 22px;
+			font-weight: bold;
+			color: crimson;
+			position: absolute;
+			width: ${width}px;
+			height: ${height}px;
+			border: none;
+		`
+		this.rcontainer = document.getElementById('r-tympanogram')
+		this.rchart = new Tympanogram({ container: this.rcontainer, dims, side: 'R' })
+		// فراخوانی متد ایجاد اینپوت روی چارت اسپیچ
+		this.rchart.createUserInput({ container: this.rcontainer })
+
+
+		this.lcontainer = document.getElementById('l-tympanogram')
+		this.lchart = new Tympanogram({ container: this.lcontainer, dims, side: 'L' })
+		// فراخوانی متد ایجاد اینپوت روی چارت اسپیچ
+		this.lchart.createUserInput({ container: this.lcontainer })
+
+		// cereateEvents(this.lcontainer, this.lchart, 'l-tympanogram')
+
+
+
+
+	}
+
+	update({ data } = {}) {
+		if (data) {
+			this.rchart.update(data.R, this.rcontainer)
+			this.lchart.update(data.L, this.lcontainer)
+			this.data = { R: data.R, L: data.L }
+			// در اولین دیتادهی رویدادها ایجاد شود
+			this.cereateEvents(this.rcontainer, this.rchart, 'r-tympanogram', data.R)
+			this.cereateEvents(this.lcontainer, this.lchart, 'l-tympanogram', data.L)
+
+		} else
+		// اگر این تابع بدون پارامتر فراخوانی شود مقادیر اینپوت کاربر گرفته و دیتاآبجکت را آپدیت کند
+		{
+			console.log('without param');
+
+			this.rchart.fetchInputUserData()
+			this.lchart.fetchInputUserData()
+			this.data.R = this.rchart.data
+			this.data.L = this.lchart.data
+			console.log(this.data.L);
+
+		}
+	}
+
+	cereateEvents(container, tympanogram, containerId, data) {
+		// کنترلرهای منحنی
+		let cp = 70, cpp = 5, extraCompliance, compensated, dims
+		
+		container = document.querySelector(`[name=${containerId}]`)
+		container.querySelector("[name=compensated]").addEventListener("input", e => {
+			compensated = e.target.checked
+			console.log(e.target.checked);
+			dims = { ...this.dims, compensated }
+			tympanogram.draw({ dims })
+		})
+
+		container.querySelector("[name=extra-sc]").addEventListener("input", e => {
+			extraCompliance = e.target.checked
+			console.log(e.target.checked);
+			dims = { ...this.dims, extraCompliance }
+			tympanogram.draw({ dims })
+		})
+
+		container.querySelector("#cp").addEventListener("input", e => {
+			cp = e.target.value
+			console.log(cp);
+			data = { ...data, cp }
+			tympanogram.update(data)
+		})
+
+		container.querySelector("#cpp").addEventListener("input", e => {
+			cpp = e.target.value
+			console.log(cpp);
+			data = { ...data, cpp }
+			tympanogram.update(data)
+		})
+	}
+
 }
+
+export default new TympanogramUI()
+
+
+
+
+
+
+
+
+
+
+
+
+

package/src/allFormUI/AllFormUI.js

@@ -0,0 +1,5 @@
+import speechUI from "/src/Speech/SpeechUI.js"
+import formsUI from "/src/Forms/FormsUI.js"
+import reflexUI from "/src/Reflex/ReflexUI.js"
+import tympanogramUI from "/src/Tympanogram/TympanogramUI"
+import audiogramUI from "/src/Audiogram/AudiogramUI"

package/src/Tympanogram/ui.js

@@ -1,165 +0,0 @@
-import Tympanogram from "./Tympanogram";
-
-document.querySelector('#app').insertAdjacentHTML('beforeend', `
-<div name="tympanograms">
-	<h1 class="center">Tympanograms</h1>
-	<div class="center">
-		<div>
-			<h2 class="center red">Right</h2>
-			<section id="r-tympanogram" style="position: relative;">
-				<input type="text" name="type" maxlength="4" placeholder="---" autocomplete="off" />
-			</section>
-			<section name="r-tympanogram">
-				<p>Curve settings:</p>
-				<input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
-				<label for="cp">cp</label>
-				<input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
-				<label for="cpp">cpp</label>
-				<div>
-					<input type="checkbox" name="extra-sc" id="r-extra-sc">
-					<label for="r-extra-sc">Extra SC</label>
-				</div>
-				<div>
-					<input type="checkbox" name="compensated" id="r-compensated">
-					<label for="r-compensated">Compensated</label>
-				</div>
-			</section>
-		</div>
-
-		<div>
-			<h2 class="center blue">Left</h2>
-			<section id="l-tympanogram" style="position: relative;">
-				<input type="text" name="type" maxlength="4" placeholder="---" autocomplete="off" />
-			</section>
-			<section name="l-tympanogram">
-				<p>Curve settings:</p>
-				<input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
-				<label for="cp">cp</label>
-				<input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
-				<label for="cpp">cpp</label>
-				<div>
-					<input type="checkbox" name="extra-sc" id="l-extra-sc">
-					<label for="l-extra-sc">Extra SC</label>
-				</div>
-				<div>
-					<input type="checkbox" name="compensated" id="l-compensated">
-					<label for="l-compensated">Compensated</label>
-			</section>
-		</div>
-	</div>
-</div>
-`);
-
-let dims = {
-	"name": "RTympanogram",
-	"w": 100,
-	"h": 60,
-	"margin": {
-		"left": 2,
-		"top": 0,
-		"right": 2,
-		"bottom": 0
-	},
-	"display": "inline",
-	"width": 100 * 6,
-	"height": 60 * 6,
-}
-
-let data = {
-	type: "An",
-	ECV: '1.30',
-	SC: '0.80',
-	MEP: '-130',
-	G: 0.2,
-	expanded: false, // by default is false for expand pressure from -600 to +400
-
-}
-
-let cp = 70, cpp = 5, extraCompliance, compensated
-
-const width = 50 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
-const height = 25 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
-
-let style = `
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  font-size: 22px;
-  font-weight: bold;
-  color: crimson;
-  position: absolute;
-  width: ${width}px;
-  height: ${height}px;
-  border: none;
-`
-insertInputs({ containerID: 'r-tympanogram', side: 'R', dims, style }).focus()
-
-insertInputs({ containerID: 'l-tympanogram', side: 'L', dims, style })
-
-
-function insertInputs({ containerID, side, dims, style }) {
-	let container = document.getElementById(containerID)
-	const tympanogram = new Tympanogram({ container, dims, side })
-	tympanogram.update(data)
-
-	let input = container.querySelector('[name=type]')
-	const firstInput = input // اولین اینپوت 
-	
-	let inputDims = tympanogram.inputDims
-	input.style = style
-    input.style.color = (side === 'R') ? 'crimson' : 'blue';
-	input.style.left = inputDims[0].x - width / 2 + 'px'
-	input.style.top = inputDims[0].y - height / 2 + 'px'
-	inputDims.shift() // حذف اولین عنصر آرایه بخاط اینکه استفاده شد در نود بالایی
-
-	inputDims.forEach(dims => {
-		input = input.cloneNode()
-		input.style.left = dims.x - width / 2 + 'px'
-		input.style.top = dims.y - height / 2 + 'px'
-		input.setAttribute('name', dims.name)
-		container.appendChild(input)
-	})
-
-	container = document.querySelector(`[name=${containerID}]`)
-	console.log(container);
-	
-	container.querySelector("[name=compensated]").addEventListener("input", e => {
-		compensated = e.target.checked
-		console.log(e.target.checked);
-		dims = { ...dims, compensated }
-		tympanogram.draw({ dims })
-	})
-
-	container.querySelector("[name=extra-sc]").addEventListener("input", e => {
-		extraCompliance = e.target.checked
-		console.log(e.target.checked);
-		dims = { ...dims, extraCompliance }
-		tympanogram.draw({ dims })
-	})
-
-	container.querySelector("#cp").addEventListener("input", e => {
-		cp = e.target.value
-		console.log(cp);
-		data = { ...data, cp }
-		tympanogram.update(data)
-	})
-
-	container.querySelector("#cpp").addEventListener("input", e => {
-		cpp = e.target.value
-		console.log(cpp);
-		data = { ...data, cpp }
-		tympanogram.update(data)
-	})
-
-	return firstInput
-}
-
-
-
-
-
-
-
-
-
-