supper of hex prefixes and other views

src/css/styles.css

@@ -16,8 +16,10 @@ code { font-size: 1.2em; font-weight: bold; }
 .expression .result td { border-top: dotted 1px gray; }
 .expression { font-size: 1.5em; font-family: monospace }
 .expression .prefix { font-weight: normal; display: none; font-size: 0.9em }
+
 .hex .prefix { display: inline; }
 
+
 .help { padding: 10px; }
 .help ul { list-style-type: none; margin: 0; padding: 0;  }
 .help p { margin-top: 0 }

src/index.html

@@ -120,10 +120,12 @@
         <tr>
             <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}</td>
             <td class="bin">{operand1Binary}</td>
+            <td class="other {otherMode}"><span class="prefix">0x</span>{operand1Other}</td>
         </tr>
         <tr class="result">
-            <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}{sign}<span class="prefix">0x</span>{operand2}=<span class="prefix">0x</span>{resultStr}</td>
+            <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}{sign}<span class="prefix">0x</span>{operand2Str}=<span class="prefix">0x</span>{resultStr}</td>
             <td class="bin">{resultBinary}</td>
+            <td class="other {otherMode}">{resultOther}</td>
         </tr>
     </table>
 </script>
@@ -134,16 +136,19 @@
             <td></td>
             <td class="label {mode}"><span class="prefix">0x</span>{operand1Str}</td>
             <td class="bin">{operand1Binary}</td>
+            <td class="other {otherMode}"><span class="prefix">0x</span>{operand1Other}</td>
         </tr>
         <tr>
             <td>{sign}</td>
             <td class="label {mode}"><span class="prefix">0x</span>{operand2Str}</td>
             <td class="bin">{operand2Binary}</td>
+            <td class="other {otherMode}"><span class="prefix">0x</span>{operand2Other}</td>
         </tr>
         <tr class="result">
             <td>=</td>
             <td class="label {mode}"><span class="prefix">0x</span>{resultStr}</td>
             <td class="bin">{resultBinary}</td>
+            <td class="other {otherMode}"><span class="prefix">0x</span>{resultOther}</td>
         </tr>
     </table>
 </script>

src/js/app/bitwise/expression.js

@@ -44,8 +44,8 @@ app.set('expression', function() {
         var o2 = parseInt(matches[3], base);
 
         var m = new app.models.BitwiseOperation();
-        m.operand1 = o1;
-        m.operand2 = o2;
+        m.operand1 = new Operand(o1);
+        m.operand2 = new Operand(o2);
         m.sign = matches[2];
         m.string = matches.input;
         //m.result = eval(matches.input);
@@ -72,4 +72,15 @@ app.set('expression', function() {
             case 'dec': return 10;
         }
     }
+
+    function Operand(n) {
+        this.value = n;
+        this.hex = n.toString(16);
+        this.dec = n.toString(10);
+        this.bin = n.toString(2);
+    }
+
+    Operand.prototype.valueOf = function () {
+        return this.value;
+    };
 });

src/js/app/cmd/commands.js

@@ -39,6 +39,9 @@ app.run(function() {
                 return;
             }
             return new app.models.ViewResult('aboutTpl');
+        },
+        '-debug': function() {
+            app.debugMode = true;
         }
     });
 

src/js/app/modelViews.js

@@ -10,16 +10,26 @@ app.compose(function () {
     app.modelView(app.models.BitwiseOperation, {
         renderView: function(expr) {
             var result = calc.calcExpression(expr);
-            var maxLen = getBinaryLength([expr.operand1, expr.operand2, result]);
+            var maxLen = getBinaryLength([expr.operand1.value, expr.operand2.value, result]);
 
             var model = Object.create(expr);
+
+            var otherMode = cmdConfig.mode == 'dec' ? 'hex' : 'dec';
+
             model.mode = cmdConfig.mode;
+            model.otherMode = otherMode;
+
+            model.operand1Str = expr.operand1[cmdConfig.mode];
+            model.operand1Binary = formatter.padLeft(expr.operand1.bin, maxLen);
+            model.operand1Other = formatter.padLeft(expr.operand1[otherMode]);
+
+            model.operand2Str = expr.operand2[cmdConfig.mode];
+            model.operand2Binary = formatter.padLeft(expr.operand2.bin, maxLen);
+            model.operand2Other = expr.operand2[otherMode];
+
             model.resultStr = formatter.formatString(result, cmdConfig.mode);
-            model.operand1Str = formatter.formatString(expr.operand1, cmdConfig.mode);
-            model.operand2Str = formatter.formatString(expr.operand2, cmdConfig.mode);
-            model.operand1Binary = formatter.padLeft(formatter.formatString(expr.operand1), maxLen);
-            model.operand2Binary = formatter.padLeft(formatter.formatString(expr.operand2), maxLen);
             model.resultBinary = formatter.padLeft(formatter.formatString(result, cmdConfig.mode), maxLen);
+            model.resultOther = formatter.formatString(result, otherMode);
 
             console.log(model);
 
@@ -36,6 +46,7 @@ app.compose(function () {
         renderView: function(model) {
             var maxLen = getBinaryLength(model.numbers);
             var table = html.element('<table class="expression {mode}"></table>');
+            var otherMode = cmdConfig.mode == 'dec' ? 'hex' : 'dec';
 
             model.numbers.forEach(function(n){
 
@@ -50,6 +61,10 @@ app.compose(function () {
 
                 decCell.innerHTML = html.template('<span class="prefix">0x</span>{n}', { n: formatter.formatString(n, cmdConfig.mode) });
                 binCell.textContent = formatter.padLeft(formatter.formatString(n), maxLen);
+
+                var otherCell = row.insertCell();
+                otherCell.className = 'other ' + otherMode;
+                otherCell.innerHTML = html.template('<span class="prefix">0x</span>{n}', { n: formatter.formatString(n, otherMode) });
             });
 
             colorizeBits(table);