Device card start

Signed-off-by: Rachel <[email protected]>

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.rs]
+indent_style = space
+tab_width = 4
+
+[*.{js,ts,css,scss,html}]
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1 @@
+* text=auto

www/cspell.json

@@ -1 +1 @@
-{"flagWords":[],"words":["Astroloy","Autolathe","bapal","bapz","bapzal","batchmode","batchmodes","bdns","bdnsal","bdse","bdseal","beqal","beqz","beqzal","bgeal","bgez","bgezal","bgtal","bgtz","bgtzal","bleal","blez","blezal","bltal","bltz","bltzal","bnaal","bnan","bnaz","bnazal","bneal","bnez","bnezal","brap","brapz","brdns","brdse","breq","breqz","brge","brgez","brgt","brgtz","brle","brlez","brlt","brltz","brna","brnan","brnaz","brne","brnez","Circuitboard","codegen","Depressurising","endpos","getd","Hardsuit","hardwrap","hashables","hstack","infile","jetpack","Keybind","lbns","logicable","logicslottypes","logictype","logictypes","lparen","Mineables","modelist","ninf","noconflict","offcanvas","overcolumn","Overlength","pedia","pinf","popperjs","preproc","Pressurising","putd","QUICKFIX","reagentmode","reagentmodes","rocketstation","rparen","sapz","sattellite","sdns","sdse","seqz","serde","sgez","sgtz","slez","slotlogic","slotlogicable","slotlogictype","slotlogictypes","slottype","sltz","snan","snanz","snaz","snez","splitn","Stationeers","stationpedia","themelist","tokentype","trunc","whos","regen"],"language":"en","version":"0.2"}
+{"words":["Astroloy","Autolathe","bapal","bapz","bapzal","batchmode","batchmodes","bdns","bdnsal","bdse","bdseal","beqal","beqz","beqzal","bgeal","bgez","bgezal","bgtal","bgtz","bgtzal","bleal","blez","blezal","bltal","bltz","bltzal","bnaal","bnan","bnaz","bnazal","bneal","bnez","bnezal","brap","brapz","brdns","brdse","breq","breqz","brge","brgez","brgt","brgtz","brle","brlez","brlt","brltz","brna","brnan","brnaz","brne","brnez","Circuitboard","codegen","Depressurising","endpos","getd","Hardsuit","hardwrap","hashables","hstack","infile","jetpack","Keybind","lbns","logicable","logicslottypes","logictype","logictypes","lparen","Mineables","modelist","ninf","noconflict","offcanvas","overcolumn","Overlength","pedia","pinf","popperjs","preproc","Pressurising","putd","QUICKFIX","reagentmode","reagentmodes","rocketstation","rparen","sapz","sattellite","sdns","sdse","seqz","serde","sgez","sgtz","slez","slotlogic","slotlogicable","slotlogictype","slotlogictypes","slottype","sltz","snan","snanz","snaz","snez","splitn","Stationeers","stationpedia","themelist","tokentype","trunc","whos","regen","regen"],"language":"en","version":"0.2","flagWords":[]}

www/src/index.html

@@ -207,7 +207,7 @@ <h6>Editor Cursor Style</h6>
                 </div>
                 <hr />
                 <div class="hstack g-0">
-                  <div>Last Run Operations</div>
+                  <div>Last Run Operations Count</div>
                   <div class="ms-auto" id="vmActiveICStateICount"></div>
                 </div>
                 <hr />

www/src/js/virtual_machine/device.ts

@@ -9,7 +9,7 @@ class VMDeviceUI {
     canvasEl: HTMLDivElement;
     deviceCountEl: HTMLElement;
     canvas: Offcanvas;
-    private _deviceCards: Map<number, VMDeviceCard>;
+    private _deviceSummaryCards: Map<number, VMDeviceSummaryCard>;
 
     constructor(ui: VirtualMachineUI) {
         const that = this;
@@ -18,23 +18,23 @@ class VMDeviceUI {
         this.canvasEl = document.getElementById('vmDevicesOCBody') as HTMLDivElement;
         this.deviceCountEl = document.getElementById('vmViewDeviceCount');
         this.canvas = new Offcanvas(this.canvasEl);
-        this._deviceCards = new Map();
+        this._deviceSummaryCards = new Map();
     }
 
     update(active_ic: DeviceRef) {
         const devices = window.VM.devices;
         this.deviceCountEl.innerText = `(${devices.size})`
         for (const [id, device] of devices) {
-            if (!this._deviceCards.has(id)) {
-                this._deviceCards.set(id, new VMDeviceCard(this, device));
+            if (!this._deviceSummaryCards.has(id)) {
+                this._deviceSummaryCards.set(id, new VMDeviceSummaryCard(this, device));
             }
         }
-        this._deviceCards.forEach((card, _id) => { card.update(active_ic)});
+        this._deviceSummaryCards.forEach((card, _id) => { card.update(active_ic)});
     }
 
 }
 
-class VMDeviceCard {
+class VMDeviceSummaryCard {
     root: HTMLDivElement;
     viewBtn: HTMLButtonElement;
     deviceUI: VMDeviceUI;
@@ -71,7 +71,7 @@ class VMDeviceCard {
         const btnTxt = `Device ${this.device.id}${deviceName}`
         this.viewBtn.innerText = btnTxt;
 
-        // regen badges
+        // regenerate badges
         this.device.connections.forEach((conn, index) => {
             if ( typeof conn === "object") {
                 var badge = document.createElement('span');
@@ -109,4 +109,37 @@ class VMDeviceCard {
 
 }
 
+class VMDeviceCard {
+    ui: VMDeviceUI;
+    container: HTMLElement;
+    root: HTMLDivElement;
+
+    header: HTMLHeadingElement;
+    device: DeviceRef;
+    nameInput: HTMLInputElement;
+    nameHash: HTMLSpanElement;
+    badges: HTMLSpanElement[];
+    fieldsContainer: HTMLDivElement;
+    slotsContainer: HTMLDivElement;
+    pinsContainer: HTMLDivElement;
+    networksContainer: HTMLDivElement;
+
+    constructor(ui: VMDeviceUI, container: HTMLElement, device: DeviceRef) {
+        this.ui = ui;
+        this.container = container;
+        this.device = device;
+
+        this.root = document.createElement('div');
+
+        this.header = document.createElement('h5');
+        this.nameInput = document.createElement('input');
+        this.nameHash = document.createElement('span');
+        this.badges = [];
+        this.fieldsContainer = document.createElement('div');
+        this.slotsContainer = document.createElement('div');
+        this.pinsContainer = document.createElement('div');
+        this.networksContainer = document.createElement('div');
+    }
+}
+
 export { VMDeviceUI }