jsMVCExample


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MVC</title>
    <style>
        html,
        body {
            display: flex;
            width: 95%;
            height: 95%;
            min-width: 810px;
            min-height: 410px;
            align-items: center;
            justify-content: center;
            margin: 8px 15px;
        }

        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }
        .calcElement {
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 50px;
            min-height: 50px;
            border: 1px solid black;
            margin: 5px 5px;
            padding: 2px 2px;
            font: bold 30px arial;
        }
    </style>
</head>
<body>
    <div id="calcView" class="centered">
        <div id="calcValA" class="calcElement"></div>
        <div id="calcOp" class="calcElement"></div>
        <div id="calcValB" class="calcElement"></div>
        <div id="calcEqual" class="calcElement">=</div>
        <div id="calcRes" class="calcElement"></div>
    </div>
    <div id="calcController" class="centered">
        <input id="calcInputAll" type="text" placeholder="valA oper valB">
    </div>
    <script>
        `use strict`

        class CalcModel {
            constructor() {
                this._valA = 0;
                this._valB = 0;
                this._op = '+'
                this._res = 0;
                this._views = [];
            }
            static operations = {
                '+': (a, b) => +a + +b,
                '-': (a, b) => a - b,
                '*': (a, b) => a * b,
                '/': (a, b) => a / b,
            }

            set valA(val) {
                if (this._valA != val) { this._valA = val; }
            }
            set valB(val) {
                if (this._valB != val) { this._valB = val; }
            }
            set op(val) {
                if (this._op != val) { this._op = val; }
            }

            get valA() { return this._valA; }
            get valB() { return this._valB; }
            get op() { return this._op; }

            evaluate() {
                if (Object.keys(CalcModel.operations).includes(this._op)) {
                    this._res = CalcModel.operations[this._op](this._valA, this._valB);
                }
                else {
                    this._res = 'ERROR';
                }
                this.notify();
            }

            addView(view) {
                this._views.push(view);
            }

            removeView(view) {
                this._views.splice(this._views.indexOf(view), 1);
            }

            notify() {
                for (let view of this._views) {
                    view.render(this._valA, this._valB, this._op, this._res);
                }
            }
        }

        class CalcView {
            constructor(calcModel){
                this._calcModel = calcModel;
                this.attach();
            }

            attach() {
                this._calcModel.addView(this);
            }

            detach() {
                this._calcModel.removeView(this);
            }

            render(valA, valB, op, res) {
                // empty
            }
        }

        class CalcViewConsole extends CalcView {
            render(valA, valB, op, res) {
                console.log(`${valA} ${op} ${valB} = ${res}`);
            }
        }

        class CalcViewHtmlDiv extends CalcView {
            constructor(calcModel, div) {
                super(calcModel);
                this._mainDiv = document.querySelector(`#${div}`);
                this._valA = this._mainDiv.querySelector('#calcValA');
                this._valB = this._mainDiv.querySelector('#calcValB');
                this._op = this._mainDiv.querySelector('#calcOp');
                this._res = this._mainDiv.querySelector('#calcRes');
            }

            render(valA, valB, op, res) {
                this._valA.textContent = valA;
                this._op.textContent = op;
                this._valB.textContent = valB;
                this._res.textContent = res;
            }
        }

        class CalcController {
            constructor(calcModel) {
                this._calcModel = calcModel;
            }

            setValA(val, evaluate = false) {
                this._calcModel.valA = val;
                if (evaluate) { this._calcModel.evaluate(); }
            }

            setValB(val, evaluate = false) {
                this._calcModel.valB = val;
                if (evaluate) { this._calcModel.evaluate(); }
            }

            setOp(op, evaluate = false) {
                this._calcModel.op = op;
                if (evaluate) { this._calcModel.evaluate(); }
            }

        }

        class CalcControllerText extends CalcController {
            constructor(calcModel) {
                super(calcModel);
            }

            evaluateText(text) {
                let data = [...text.matchAll(/\s*(\d+)\s*([+-/*]){1}\s*(\d+)/g)][0];
                if (data) {
                    let [, valA, op, valB] = data;

                    this.setValA(valA);
                    this.setValB(valB);
                    this.setOp(op, true);
                    return true;
                }
                return false;
            }
        }

        class CalcControllerHtmlInputText extends CalcControllerText {
            constructor(calcModel, input) {
                super(calcModel);
                this._input = document.querySelector(`#${input}`);

                this._input.addEventListener('change', (event) => { this.onChange(event); });
            }

            onChange(event) {
                if (!this.evaluateText(event.target.value)) {
                    alert('Invalid input for evalution!');
                }
            }
        }

        {
            let calcModel = new CalcModel();
            let calcViewConsole = new CalcViewConsole(calcModel);
            let calcViewHtmlDiv = new CalcViewHtmlDiv(calcModel, 'calcView');
            let calcController = new CalcController(calcModel);
            let calcControllerText = new CalcControllerText(calcModel);
            let calcControllerHtmlInputText = new CalcControllerHtmlInputText(calcModel, 'calcInputAll');

            calcController.setValA(1500, true);
            calcController.setValB(1400, true);
            calcController.setOp('+', true);

            //calcViewConsole.detach();

            calcController.setValA(3);
            calcController.setValB(4);
            calcController.setOp('*', true);

            console.log(calcControllerText.evaluateText('   7  +   8   '));
        }
    </script>

</body>
</html>