avr39ripe

jsMVCClassesNew

Jun 10th, 2021
473
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en" id="html">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>MVC</title>
  7.     <style>
  8.         html,
  9.         body {
  10.             display: flex;
  11.             width: 95%;
  12.             height: 95%;
  13.             min-width: 810px;
  14.             min-height: 410px;
  15.             align-items: center;
  16.             justify-content: center;
  17.             margin: 8px 15px;
  18.         }
  19.  
  20.         .centered {
  21.             display: flex;
  22.             flex-direction: row;
  23.             align-items: center;
  24.             justify-content: center;
  25.             padding: 50px;
  26.         }
  27.  
  28.         .calcElement {
  29.             display: flex;
  30.             justify-content: center;
  31.             align-items: center;
  32.             min-width: 50px;
  33.             min-height: 50px;
  34.             border: 1px solid black;
  35.             margin: 5px 5px;
  36.             padding: 2px 2px;
  37.             font: bold 30px arial;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <div id="calcView" class="centered">
  44.         <div id="calcValA" class="calcElement"></div>
  45.         <div id="calcOp" class="calcElement"></div>
  46.         <div id="calcValB" class="calcElement"></div>
  47.         <div id="calcEqual" class="calcElement">=</div>
  48.         <div id="calcRes" class="calcElement"></div>
  49.     </div>
  50.  
  51.     <div id="calcController" class="centered">
  52.         <input id="calcInputAll" type="text" placeholder="valA oper valB">
  53.     </div>
  54.  
  55.     <script>
  56.         'use strict'
  57.  
  58.         class CalcModel {
  59.             constructor() {
  60.                 this._valA = 0;
  61.                 this._valB = 0;
  62.                 this._op = '+';
  63.                 this._res = 0;
  64.                 this._views = [];
  65.             }
  66.  
  67.             static operations = {
  68.                 '+': (a, b) => +a + +b,
  69.                 '-': (a, b) => a - b,
  70.                 '/': (a, b) => a / b,
  71.                 '*': (a, b) => a * b
  72.             };
  73.  
  74.             get valA() { return this._valA; }
  75.             get valB() { return this._valB; }
  76.             get op() { return this._op; }
  77.  
  78.             set valA(val) {
  79.                 if (this._valA != val) { this._valA = val; }
  80.             }
  81.  
  82.             set valB(val) {
  83.                 if (this._valB != val) { this._valB = val; }
  84.             }
  85.  
  86.             set op(val) {
  87.                 if (this._op != val) { this._op = val; }
  88.             }
  89.  
  90.             evaluate() {
  91.                 //if (this.op == '+') { this._res = this._valA + this._valB }
  92.                 //else if (this.op == '-') { this._res = this._valA - this._valB }
  93.  
  94.                 if (Object.keys(CalcModel.operations).includes(this._op)) {
  95.                     this._res = CalcModel.operations[this._op](this._valA, this._valB);
  96.                 }
  97.                 else {
  98.                     this._res = 'ERROR';
  99.                 }
  100.                 this.notify();
  101.             }
  102.  
  103.             addView(view) {
  104.                 this._views.push(view);
  105.             }
  106.  
  107.             removeView(view) {
  108.                 this._views.splice(this._views.indexOf(view), 1);
  109.             }
  110.  
  111.             notify() {
  112.                 for (let view of this._views) {
  113.                     view.render();
  114.                 }
  115.             }
  116.         }
  117.  
  118.         class CalcView {
  119.             constructor(calcModel) {
  120.                 this._calcModel = calcModel;
  121.                 this.attach();
  122.             }
  123.  
  124.             attach() {
  125.                 this._calcModel.addView(this);
  126.             }
  127.  
  128.             detach() {
  129.                 this._calcModel.removeView(this);
  130.             }
  131.  
  132.             render() {
  133.                 // empty!
  134.             }
  135.         }
  136.  
  137.         class CalcViewConsole extends CalcView {
  138.             render() {
  139.                 console.log(`${this._calcModel._valA} ${this._calcModel._op} ${this._calcModel._valB} = ${this._calcModel._res}`);
  140.             }
  141.         }
  142.  
  143.         class CalcViewHtmlDiv extends CalcView {
  144.             constructor(calcModel, div) {
  145.                 super(calcModel);
  146.                 this._mainDiv = document.querySelector(`#${div}`);
  147.                 this._valA = this._mainDiv.querySelector(`#calcValA`);
  148.                 this._valB = this._mainDiv.querySelector(`#calcValB`);
  149.                 this._op = this._mainDiv.querySelector(`#calcOp`);
  150.                 this._res = this._mainDiv.querySelector(`#calcRes`);
  151.             }
  152.  
  153.             render() {
  154.                 this._valA.textContent = this._calcModel._valA;
  155.                 this._valB.textContent = this._calcModel._valB;
  156.                 this._op.textContent = this._calcModel._op;
  157.                 this._res.textContent = this._calcModel._res;
  158.             }
  159.         }
  160.  
  161.         class CalcController {
  162.             constructor(calcModel) {
  163.                 this._calcModel = calcModel;
  164.             }
  165.  
  166.             setValA(val, evaluate = false) {
  167.                 this._calcModel.valA = val;
  168.                 if (evaluate) {
  169.                     this._calcModel.evaluate();
  170.                 }
  171.             }
  172.  
  173.             setValB(val, evaluate = false) {
  174.                 this._calcModel.valB = val;
  175.                 if (evaluate) {
  176.                     this._calcModel.evaluate();
  177.                 }
  178.             }
  179.  
  180.             setOp(val, evaluate = false) {
  181.                 this._calcModel.op = val;
  182.                 if (evaluate) {
  183.                     this._calcModel.evaluate();
  184.                 }
  185.             }
  186.         }
  187.  
  188.         class CalcControllerText extends CalcController {
  189.  
  190.             evaluateText(text) {
  191.                 let data = [...text.matchAll(/\s*(\d+)\s*([+-/*]){1}\s*(\d+)/g)][0];
  192.                 if (data) {
  193.                     let [, valA, op, valB] = data;
  194.  
  195.                     this.setValA(valA);
  196.                     this.setValB(valB);
  197.                     this.setOp(op, true);
  198.                     return true;
  199.                 }
  200.                 return false;
  201.             }
  202.         }
  203.  
  204.         class CalcControllerHtmlInputText extends CalcControllerText {
  205.             constructor(calcModel, input) {
  206.                 super(calcModel);
  207.                 this._input = document.querySelector(`#${input}`);
  208.  
  209.                 this._input.addEventListener('change', (event) => { this.onChange(event); });
  210.             }
  211.  
  212.             onChange(event) {
  213.                 if (!this.evaluateText(event.target.value)) {
  214.                     alert('Invalid input for evalution!');
  215.                 }
  216.             }
  217.         }
  218.  
  219.         const calcModel = new CalcModel();
  220.         const calcViewConsole = new CalcViewConsole(calcModel);
  221.         const calcViewHtmlDiv = new CalcViewHtmlDiv(calcModel, 'calcView');
  222.         const calcController = new CalcController(calcModel);
  223.         const calcControllerText = new CalcControllerText(calcModel);
  224.         const calcControllerHtmlInputText = new CalcControllerHtmlInputText(calcModel, 'calcInputAll');
  225.  
  226.         calcController.setValA(3);
  227.         calcController.setValB(5);
  228.         calcController.setOp('+', true);
  229.  
  230.         calcController.setValA(7);
  231.         calcController.setValB(8);
  232.         calcController.setOp('*', true);
  233.  
  234.         //calcViewConsole.detach();
  235.         //calcViewHtmlDiv.detach();
  236.  
  237.         calcController.setValA(5);
  238.         calcController.setValB(6);
  239.         calcController.setOp('*', true);
  240.  
  241.         console.log(calcControllerText.evaluateText('   7  +   8   '));
  242.     </script>
  243. </body>
  244.  
  245. </html>
RAW Paste Data