avr39ripe

jsTrafficLightMVCBase

Jun 14th, 2021 (edited)
698
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 TrafficLightM {
  59.             static colors = ['red', 'yellow', 'green'];
  60.             constructor(color) {
  61.                 this._views = [];
  62.                 this.colorString = color;
  63.             }
  64.  
  65.             addView(view) {
  66.                 this._views.push(view);
  67.             }
  68.  
  69.             removeView(view) {
  70.                 this._views.splice(this._views.indexOf(view), 1);
  71.             }
  72.  
  73.             notify() {
  74.                 if (this._views.length) {
  75.                     for (let view of this._views) {
  76.                         view.render();
  77.                     }
  78.                 }
  79.                
  80.             }
  81.  
  82.             set currentColor(val) {
  83.                 if (val >= 0) {
  84.                     this._currentColor = val;
  85.  
  86.                     if (this._currentColor > TrafficLightM.colors.length - 1) {
  87.                         this._currentColor = 0;
  88.                     }
  89.                 }
  90.                 this.notify()
  91.             }
  92.  
  93.             get currentColor() { return this._currentColor; }
  94.  
  95.             set colorString(val) {
  96.                 this.currentColor = TrafficLightM.colors.indexOf(val);
  97.             }
  98.  
  99.             get colorString() { return TrafficLightM.colors[this._currentColor]; }
  100.  
  101.             cycle() {
  102.                 ++this.currentColor;
  103.             }
  104.         }
  105.  
  106.         class TrafficLightV {
  107.             constructor(model) {
  108.                 this._model = model;
  109.                 this.attach();
  110.             }
  111.  
  112.             attach() {
  113.                 this._model.addView(this);
  114.             }
  115.  
  116.             detach() {
  117.                 this._model.removeView(this);
  118.             }
  119.  
  120.             render() {
  121.                 // empty!
  122.             }
  123.         }
  124.  
  125.         class TrafficLightVConsole extends TrafficLightV{
  126.             render() {
  127.                 console.log(`TrafficLight: ${this._model.colorString}`);
  128.             }
  129.         }
  130.  
  131.         {
  132.             const tlm = new TrafficLightM('green');
  133.             const tlVConsole = new TrafficLightVConsole(tlm);
  134.  
  135.             //console.log(`TrafficLightM currentColor: ${tlm.currentColor}`);
  136.             //console.log(`TrafficLightM colorString: ${tlm.colorString}`);
  137.  
  138.             //for (let i = 0; i < 5; ++i, tlm.cycle()) {
  139.             //    //console.log(`TrafficLightM colorString: ${tlm.colorString}`);
  140.             //}
  141.  
  142.             tlm.colorString = 'red';
  143.             tlm.colorString = 'yellow';
  144.  
  145.             tlm.currentColor = 2;
  146.             tlm.currentColor = 1;
  147.  
  148.         }
  149.     </script>
  150. </body>
  151.  
  152. </html>
RAW Paste Data