Merge pull request #37 from rbaker26/gui_work_emulator

GUI Work and Link Fixes

SAP1EMU.WebApp/Controllers/HomeController.cs

@@ -68,6 +68,8 @@ public IActionResult Privacy()
         }
 
 
+        // TODO
+        // Prob can remove
         public async Task<IActionResult> Wiki()
         {
 

SAP1EMU.WebApp/Views/Home/About.cshtml

@@ -1,4 +1,8 @@
-@{
+
+<script src="~/js/Views/AboutView.js" type="text/javascript"></script>
+
+
+@{
     ViewData["Title"] = "About";
 }
 
@@ -20,7 +24,7 @@
     <br />
     For more info, please see the license on the Project's Github page.
     <br />
-    Please also visit <a class="text-dark" id="open-ben-eater"><u>Ben Eater's Website</u></a> to learn more about his project.
+    Please also visit <a onclick="openBenEater()" class="text-dark"><u>Ben Eater's Website</u></a> to learn more about his project.
 </p>
 
 <br />
@@ -32,9 +36,8 @@
     The majority of my programming focus is on C++ and C# with an emphasis on ASP.NET Core.
     I have worked with other languages like Java, SQL, and Python, but mostly for academic projects. <br />
 
-    Checkout my <a class="text-dark" id="open-github-profile"><u>Github Profile</u></a> for more about me or for my contact info.
+    Checkout my <a onclick="openGithub()" class="text-dark"><u>Github Profile</u></a> for more about me or for my contact info.
 </p>
-
 <h4>Why this project?</h4>
 <p>
     At Saddleback College, I worked as a Teachers Assistant in the Intro to Computer Architecture and Machine Language Lab
@@ -45,20 +48,3 @@
     For these reasons, I decided to create the SAP1Emu Project.
 </p>
 
-<script>
-    (function () {
-        const { ipcRenderer } = require("electron");
-
-        document.getElementById("open-github-profile").addEventListener("click", () => {
-            ipcRenderer.send("open-github-profile");
-        });
-        document.getElementById("open-ben-eater").addEventListener("click", () => {
-            ipcRenderer.send("open-ben-eater");
-        });
-
-
-    }());
-
-</script>
-
-

SAP1EMU.WebApp/Views/Home/Emulator.cshtml

@@ -1,7 +1,59 @@
-
+<script src="/js/CodeMirror/lib/codemirror.js"></script>
+<script src="/js/CodeMirror/mode/gas/gas_sap1.js" type="text/javascript"></script>
+<link href="/js/CodeMirror/lib/codemirror.css" rel="stylesheet" type="text/css" />
+
+<script src="/lib/jquery/dist/jquery.js" type="text/javascript"></script>
+<script src="/js/Views/EmulatorView.js" type="text/javascript"></script>
+
 @{
     ViewData["Title"] = "Emulator";
 }
 
 <h1>Emulator</h1>
 
+<div class="row">
+    <div class="column2">
+        <h3>Assembly</h3>
+        <br />
+
+        <form id="asm_form" method="post" action="AssembleCode">
+            @Html.TextArea("CodeList", null, new { rows = "20", cols = "80", @class = "codebox", id = "asm_code" })
+            <input type="button" name="CodeList" value="Assemble" onclick="AssembleCode(this)" />
+            <input type="button" value="Load from File" />
+        </form>
+        <br />
+        <br />
+    </div>
+    <div class="column2">
+        <div class="vbox_sap">
+            <div>
+                <h3>SAP1</h3>
+            </div>
+            <div class="hbox_sap">
+                <div>
+                    <h3>RAM</h3>
+                    @Html.TextArea("ram_dump", null, new { rows = "16", cols = "20", @class = "codebox", id = "ram_dump" })
+                </div>
+                <div vbox_sap>
+                    <div>
+                        <h3>Controls</h3>
+                        <button></button>  <button></button> <br />
+                        <button></button> <br />
+                    </div>
+                    <div>
+                        <h3>Flags</h3>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <br />
+</div>
+
+<div class="row">
+    <div class="column1">
+        <h4>Emulator Output</h4>
+        <code class="emulator-out" id="emulator-out"><br /></code>
+    </div>
+    <div>@*This blank div is req to trick the row::after or else the margins get screwed up*@</div>
+</div>

SAP1EMU.WebApp/Views/Shared/_Layout.cshtml

@@ -6,6 +6,9 @@
     <title>@ViewData["Title"] - SAP1Emu Project</title>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" />
+
+    <script src="/js/Views/_LayoutView.js" type="text/javascript"></script>
+
 </head>
 <body>
     <header>
@@ -31,7 +34,7 @@
                             <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Assembler">Assembler</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link text-dark" id="open-wiki" >Wiki</a>
+                            <a class="nav-link text-dark" onclick="openWiki()" >Wiki</a>
                         </li>
                     </ul>
                 </div>
@@ -55,19 +58,5 @@
     @RenderSection("Scripts", required: false)
 
 
-    <script>
-        (function redirect() {
-            const { ipcRenderer } = require("electron");
-          
-            //document.getElementById("open-file-manager").addEventListener("click", () => {
-            //    ipcRenderer.send("open-file-manager");
-            //});
-
-            document.getElementById("open-wiki").addEventListener("click", () => {
-                ipcRenderer.send("open-wiki");
-            });
-
-        }());
-    </script>
 </body>
 </html>

SAP1EMU.WebApp/wwwroot/css/site.css

@@ -124,4 +124,18 @@ body {
 
 .assembler-out{
 
-}
+}
+
+.vbox_sap {
+    display: flex;
+    flex-direction: column;
+}
+
+.hbox_sap {
+    display: flex;
+    flex-direction: row;
+}
+
+.profile-pic {
+    max-width: 50%;
+}

SAP1EMU.WebApp/wwwroot/js/Views/AboutView.js

@@ -0,0 +1,12 @@
+
+
+function openGithub() {
+    const { ipcRenderer } = require("electron");
+    ipcRenderer.send("open-github-profile");
+}
+
+
+function openBenEater() {
+    const { ipcRenderer } = require("electron");
+    ipcRenderer.send("open-ben-eater");
+}

SAP1EMU.WebApp/wwwroot/js/Views/EmulatorView.js

@@ -0,0 +1,22 @@
+var asm_editor;
+var ram_dump;
+
+window.onload = function () {
+    asm_editor = CodeMirror.fromTextArea(document.getElementById("asm_code"), {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: { name: "gas_sap1", architecture: "x86" },
+    });
+
+    ram_dump = CodeMirror.fromTextArea(document.getElementById("ram_dump"), {
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: { name: "gas_sap1", architecture: "x86" },
+        readOnly: true,
+        firstLineNumber: 0,
+        lineNumberFormatter: function (line) { return "0x" + line.toString(16).toLocaleUpperCase();},
+    });
+
+    // Init RAM Box
+    ram_dump.setValue("0000 0000\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
+}

SAP1EMU.WebApp/wwwroot/js/Views/_LayoutView.js

@@ -0,0 +1,6 @@
+
+
+function openWiki() {
+    const { ipcRenderer } = require("electron");
+    ipcRenderer.send("open-wiki");
+}