[MIRROR] Refactor of modular PC UIs (#874)

* Refactor of modular PC UIs

* .rej fix

tgui/src/interfaces/computer_main.ract

@@ -1,47 +0,0 @@
-
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
-	
-<ui-display>
-	<i>No program loaded. Please select program from list below.</i>
-	<table>
-		{{#each data.programs}}
-			<tr><td><ui-button action='PC_runprogram' params='{"name": "{{name}}"}'>
-				{{desc}}
-			</ui-button>
-			<td><ui-button state='{{running ? null : "disabled"}}' icon='close' action='PC_killprogram' params='{"name": "{{name}}"}'></ui-button>
-		{{/each}}
-	</table>
-</ui-display>

tgui/src/interfaces/ntnet_dos.ract

@@ -1,58 +0,0 @@
-
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
-<ui-display>
-	{{#if data.error}}
-		##SYSTEM ERROR: {{data.error}}<ui-button action='PRG_reset'>RESET</ui-button>
-	{{elseif data.target}}
-		##DoS traffic generator active. Tx: {{data.speed}}GQ/s<br>
-		{{#each data.dos_strings}}
-			{{nums}}<br>
-		{{/each}}
-		<ui-button action='PRG_reset'>ABORT</ui-button>
-	{{else}}
-		##DoS traffic generator ready. Select target device.<br>
-		{{#if data.focus}}
-			Targeted device ID: {{data.focus}}
-		{{else}}
-			Targeted device ID: None
-		{{/if}}
-		<ui-button action='PRG_execute'>EXECUTE</ui-button><div style="clear:both"></div>
-		Detected devices on network:<br>
-		{{#each data.relays}}
-			<ui-button action='PRG_target_relay' params='{"targid": "{{id}}"}'>{{id}}</ui-button>
-		{{/each}}
-	{{/if}}
-</ui-display>

tgui/src/interfaces/ntos_ai_restorer.ract

@@ -1,4 +1,3 @@
-
 <script>
   component.exports = {
     computed: {
@@ -12,41 +11,8 @@
   }
 </script>
 
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
-
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 {{#if data.restoring}}
   <ui-notice>

tgui/src/interfaces/ntos_card.ract

@@ -1,37 +1,5 @@
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 {{#if data.have_id_slot}}
 <ui-button action='PRG_switchm' icon='home' params='{"target" : "mod"}' state='{{data.mmode == 1 ? "disabled" : null}}'>Access Modification</ui-button>
@@ -151,12 +119,14 @@
 	  <div id="all-value.jobs">
 		<table>
 		  <tr>
-			<th></th><th>Command</th>
+			<th>Command</th>
+			<td>
+			  <ui-button action='PRG_assign' params='{"assign_target" : "Captain"}' state='{{data.id_rank == "Captain" ? "selected" : null}}'>Captain</ui-button>
+			</td>
 		  </tr>
 		  <tr>
 			<th>Special</th>
 			<td>
-			  <ui-button action='PRG_assign' params='{"assign_target" : "Captain"}' state='{{data.id_rank == "Captain" ? "selected" : null}}'>Captain</ui-button>
 			  <ui-button action='PRG_assign' params='{"assign_target" : "Custom"}'>Custom</ui-button>
 			</td>
 		  </tr>
@@ -210,10 +180,9 @@
 		  </tr>
 		  {{#if data.centcom_access}}
 			<tr>
-			  <th style="color: '#A52A2A';">CentCom</th>
+			  <th style="color: '#A52A2A';">Centcom</th>
 			  <td>
 				{{#each data.centcom_jobs}}
-
 				  <ui-button action='PRG_assign' params='{"assign_target" : "{{job}}"}' state='{{data.id_rank == job ? "selected" : null}}'>{{display_name}}</ui-button>
 				{{/each}}
 			  </td>

tgui/src/interfaces/ntos_configuration.ract

@@ -1,4 +1,3 @@
-
 <script>
   component.exports = {
     data: {
@@ -12,43 +11,16 @@
     }
 </script>
 
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
+
 <ui-display>
 	<i>Welcome to computer configuration utility. Please consult your system administrator if you have any questions about your device.</i><hr>
 	<ui-display title='Power Supply'>
+		<ui-section label='Power Usage'>
+			{{data.power_usage}}W
+		</ui-section>
+		
 		{{#if data.battery}}
 			<ui-section label='Battery Status'>
 					Active
@@ -64,41 +36,32 @@
 				Not Available
 			</ui-section>
 		{{/if}}
-
-		<ui-section label='Power Usage'>
-			{{data.power_usage}}W
-		</ui-section>
 	</ui-display>
 	
 	<ui-display title='File System'>
 		<ui-section label='Used Capacity'>
-			<ui-bar min='0' max='{{adata.disk_size}}' value='{{adata.disk_used}}' state='good'>{{Math.round(adata.disk_used)}}GQ/{{adata.disk_size}}GQ</ui-bar>
+			<ui-bar min='0' max='{{adata.disk_size}}' value='{{adata.disk_used}}' state='good'>{{Math.round(adata.disk_used)}}GQ / {{adata.disk_size}}GQ</ui-bar>
 		</ui-section>
 	</ui-display>
 	
 	<ui-display title='Computer Components'>
-
 		{{#each data.hardware}}
 			<ui-subdisplay title='{{name}}'>
+				<div style='display: table-caption; margin-left: 3px'>{{desc}}</div>
 
-				<i>{{desc}}</i><br>
 				<ui-section label='State'>
-
+					<ui-button state='{{critical ? "disabled" : null}}' action='PC_toggle_component' params='{"name": "{{name}}"}'>
+						{{enabled ? "Enabled" : "Disabled"}}
+					</ui-button>
+				</ui-section>
 				
-					{{enabled ? "Enabled" : "Disabled"}}
-				</ui-section>
-			
-				<ui-section Label='Power Usage'>
-					{{powerusage}}W
-				</ui-section>
-				{{#if !critical}}
-					<ui-section label='Toggle Component'>
-						<ui-button icon='{{enabled ? "power-off" : "close"}}' action='PC_toggle_component' params='{"name": "{{name}}"}'>
-							{{enabled ? "On" : "Off"}}
-						</ui-button>
+				{{#if powerusage}}
+					<ui-section label='Power Usage'>
+						{{powerusage}}W
 					</ui-section>
 				{{/if}}
-			<br><br>
+			</ui-subdisplay>			
+			<br>
 		{{/each}}
 	</ui-display>
 </ui-display>

tgui/src/interfaces/ntos_file_manager.ract

@@ -1,41 +1,8 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 <ui-display>
 
-	<div style="float: left">
-		<div class='item'>
-			<table><tr>
-			{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-				<td><img src='{{data.PC_batteryicon}}'>
-			{{/if}}
-			{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-				<td><b>{{data.PC_batterypercent}}</b>
-			{{/if}}
-			{{#if data.PC_ntneticon}}
-				<td><img src='{{data.PC_ntneticon}}'>
-			{{/if}}
-			{{#if data.PC_apclinkicon}}
-				<td><img src='{{data.PC_apclinkicon}}'>
-			{{/if}}
-			{{#if data.PC_stationtime}}
-				<td><b>{{data.PC_stationtime}}<b>
-			{{/if}}
-			{{#each data.PC_programheaders}}
-				<td><img src='{{icon}}'>
-			{{/each}}
-			</table>
-		</div>
-	</div>
-	<div style="float: right">
-		<table><tr>
-			<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-			{{#if data.PC_showexitprogram}}
-				<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-				<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-			{{/if}}
-		</table>
-	</div>
-	<div style="clear: both">
-
 	{{#if data.error}}
 		<h2>An error has occurred and this program can not continue.</h2>
 		Additional information: {{data.error}}<br>

tgui/src/interfaces/ntos_main.ract

@@ -0,0 +1,14 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
+
+<ui-display>
+	<i>No program loaded. Please select program from list below.</i>
+	<table>
+		{{#each data.programs}}
+			<tr><td><ui-button action='PC_runprogram' params='{"name": "{{name}}"}'>
+				{{desc}}
+			</ui-button>
+			<td><ui-button state='{{running ? null : "disabled"}}' icon='close' action='PC_killprogram' params='{"name": "{{name}}"}'></ui-button>
+		{{/each}}
+	</table>
+</ui-display>

tgui/src/interfaces/ntos_net_chat.ract

@@ -1,38 +1,6 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
 <ui-display>
 	{{#if data.adminmode}}
 		<h1>ADMINISTRATIVE MODE</h1>

tgui/src/interfaces/ntos_net_dos.ract

@@ -0,0 +1,26 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
+
+<ui-display>
+	{{#if data.error}}
+		##SYSTEM ERROR: {{data.error}}<ui-button action='PRG_reset'>RESET</ui-button>
+	{{elseif data.target}}
+		##DoS traffic generator active. Tx: {{data.speed}}GQ/s<br>
+		{{#each data.dos_strings}}
+			{{nums}}<br>
+		{{/each}}
+		<ui-button action='PRG_reset'>ABORT</ui-button>
+	{{else}}
+		##DoS traffic generator ready. Select target device.<br>
+		{{#if data.focus}}
+			Targeted device ID: {{data.focus}}
+		{{else}}
+			Targeted device ID: None
+		{{/if}}
+		<ui-button action='PRG_execute'>EXECUTE</ui-button><div style="clear:both"></div>
+		Detected devices on network:<br>
+		{{#each data.relays}}
+			<ui-button action='PRG_target_relay' params='{"targid": "{{id}}"}'>{{id}}</ui-button>
+		{{/each}}
+	{{/if}}
+</ui-display>

tgui/src/interfaces/ntos_net_downloader.ract

@@ -1,38 +1,5 @@
-
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 <ui-display>
 	<i>Welcome to software download utility. Please select which software you wish to download.</i><hr>
@@ -58,61 +25,62 @@
 					{{data.downloaddesc}}
 				</ui-section>
 				<ui-section label='File size'>
-					{{data.downloadcompletion}}GQ / {{data.downloadsize}}GQ
+					{{data.downloadsize}}GQ
 				</ui-section>
 				<ui-section label='Transfer Rate'>
 					{{data.downloadspeed}} GQ/s
 				</ui-section>
 				<ui-section label='Download progress'>
-					<ui-bar min='0' max='{{adata.downloadsize}}' value='{{adata.downloadcompletion}}' state='good'>{{Math.round(adata.downloadcompletion)}}/{{adata.downloadsize}}</ui-bar>
+					<ui-bar min='0' max='{{adata.downloadsize}}' value='{{adata.downloadcompletion}}' state='good'>{{Math.round(adata.downloadcompletion)}}GQ / {{adata.downloadsize}}GQ</ui-bar>
 				</ui-section>
 			</ui-display>
 		{{/if}}
 	{{/if}}
 	{{#if !data.downloadname}}
 		{{#if !data.error}}
-			<ui-display title='Primary software repository'>
-				<ui-section label='Hard drive'>
-					<ui-bar min='0' max='{{adata.disk_size}}' value='{{adata.disk_used}}' state='good'>{{Math.round(adata.disk_used)}}GQ/{{adata.disk_size}}GQ</ui-bar>
+			<ui-display title='File System'>
+				<ui-section label='Used Capacity'>
+					<ui-bar min='0' max='{{adata.disk_size}}' value='{{adata.disk_used}}' state='good'>{{Math.round(adata.disk_used)}}GQ / {{adata.disk_size}}GQ</ui-bar>
 				</ui-section>
-				{{#each data.downloadable_programs}}
-					<ui-section label='File name'>
-						{{filename}} ({{size}} GQ)
-					</ui-section>
-					<ui-section label='Program name'>
-						{{filedesc}}
-					</ui-section>	
-					<ui-section label='Description'>
-						{{fileinfo}}
-					</ui-section>
-					<ui-section label='Compatibility'>
-						{{compatibility}}
-					</ui-section>
-					<ui-section label='File controls'>
-						<ui-button icon='signal' action='PRG_downloadfile' params='{"filename": "{{filename}}"}'>
-							DOWNLOAD
-						</ui-button>
-					</ui-section>
-				{{/each}}
 			</ui-display>
-			{{#if data.hackedavailable}}
-				<ui-display title='UNKNOWN software repository'>
-					<i>Please note that NanoTrasen does not recommend download of software from non-official servers.</i>
-					{{#each data.hacked_programs}}
+			
+			<ui-display title='Primary Software Repository'>
+				{{#each data.downloadable_programs}}
+					<ui-subdisplay title='{{filedesc}}'>
+						<div style='display: table-caption; margin-left: 3px'>{{fileinfo}}</div>
+						
 						<ui-section label='File name'>
 							{{filename}} ({{size}} GQ)
 						</ui-section>
-						<ui-section label='Program name'>
-							{{filedesc}}
-						</ui-section>	
-						<ui-section label='Description'>
-							{{fileinfo}}
+						<ui-section label='Compatibility'>
+							{{compatibility}}
 						</ui-section>
-						<ui-section label='File controls'>
+						<ui-button icon='signal' action='PRG_downloadfile' params='{"filename": "{{filename}}"}'>
+							DOWNLOAD
+						</ui-button>
+					</ui-subdisplay>
+					<br>
+				{{/each}}
+			</ui-display>
+			
+			{{#if data.hackedavailable}}
+				<ui-display title='UNKNOWN Software Repository'>
+					<i>Please note that NanoTrasen does not recommend download of software from non-official servers.</i>
+					{{#each data.hacked_programs}}
+						<ui-subdisplay title='{{filedesc}}'>
+							<div style='display: table-caption; margin-left: 3px'>{{fileinfo}}</div>
+							
+							<ui-section label='File name'>
+								{{filename}} ({{size}} GQ)
+							</ui-section>
+							<ui-section label='Compatibility'>
+								{{compatibility}}
+							</ui-section>
 							<ui-button icon='signal' action='PRG_downloadfile' params='{"filename": "{{filename}}"}'>
 								DOWNLOAD
 							</ui-button>
-						</ui-section>	
+						</ui-subdisplay>
+						<br>
 					{{/each}}
 				</ui-display>
 			{{/if}}

tgui/src/interfaces/ntos_net_monitor.ract

@@ -1,40 +1,7 @@
-
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 <ui-display>
-	<div style="float: left">
-		<div class='item'>
-			<table><tr>
-			{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-				<td><img src='{{data.PC_batteryicon}}'>
-			{{/if}}
-			{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-				<td><b>{{data.PC_batterypercent}}</b>
-			{{/if}}
-			{{#if data.PC_ntneticon}}
-				<td><img src='{{data.PC_ntneticon}}'>
-			{{/if}}
-			{{#if data.PC_apclinkicon}}
-				<td><img src='{{data.PC_apclinkicon}}'>
-			{{/if}}
-			{{#if data.PC_stationtime}}
-				<td><b>{{data.PC_stationtime}}<b>
-			{{/if}}
-			{{#each data.PC_programheaders}}
-				<td><img src='{{icon}}'>
-			{{/each}}
-			</table>
-		</div>
-	</div>
-	<div style="float: right">
-		<table><tr>
-			<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-			{{#if data.PC_showexitprogram}}
-				<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-				<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-			{{/if}}
-		</table>
-	</div>
-	<div style="clear: both">
 
 	<ui-display title='WIRELESS CONNECTIVITY'>
 

tgui/src/interfaces/ntos_net_transfer.ract

@@ -1,41 +1,8 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 <ui-display>
 
-	<div style="float: left">
-		<div class='item'>
-			<table><tr>
-			{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-				<td><img src='{{data.PC_batteryicon}}'>
-			{{/if}}
-			{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-				<td><b>{{data.PC_batterypercent}}</b>
-			{{/if}}
-			{{#if data.PC_ntneticon}}
-				<td><img src='{{data.PC_ntneticon}}'>
-			{{/if}}
-			{{#if data.PC_apclinkicon}}
-				<td><img src='{{data.PC_apclinkicon}}'>
-			{{/if}}
-			{{#if data.PC_stationtime}}
-				<td><b>{{data.PC_stationtime}}<b>
-			{{/if}}
-			{{#each data.PC_programheaders}}
-				<td><img src='{{icon}}'>
-			{{/each}}
-			</table>
-		</div>
-	</div>
-	<div style="float: right">
-		<table><tr>
-			<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-			{{#if data.PC_showexitprogram}}
-				<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-				<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-			{{/if}}
-		</table>
-	</div>
-	<div style="clear: both">
-
 	{{#if data.error}}
 	<div class='item'>
 		<h2>An error has occurred during operation...</h2>

tgui/src/interfaces/ntos_power_monitor.ract

@@ -39,40 +39,8 @@
   }
 </script>
 
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
 
 <ui-display title='Network'>
   {{#if config.fancy}}

tgui/src/interfaces/ntos_revelation.ract

@@ -0,0 +1,27 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
+
+<ui-display>
+	<div class='item'>
+		<div class='itemLabel'>
+			Payload status:
+		</div>
+		<div class='itemContent'>
+			{{#if data.armed}}
+				ARMED
+			{{else}}
+				DISARMED
+			{{/if}}
+		</div>
+		<div class='itemLabel'>
+			Controls:
+		</div>
+		<div class='itemContent'>
+			<table>
+			<tr><td><ui-button action='PRG_obfuscate'>OBFUSCATE PROGRAM NAME</ui-button>
+			<tr><td><ui-button action='PRG_arm' state='{{data.armed ? "danger" : null}}'>{{data.armed ? "DISARM" : "ARM"}}</ui-button>
+			<ui-button icon='radiation' state='{{data.armed ? null : "disabled"}}' action='PRG_activate'>ACTIVATE</ui-button>
+			</table>
+		</div>
+	</div>
+</ui-display>

tgui/src/interfaces/ntos_station_alert.ract

@@ -0,0 +1,14 @@
+<link rel='ractive' href='./ntosheader.ract'>
+<ntosheader/>
+
+{{#each data.alarms:class}}
+  <ui-display title='{{class}} Alarms'>
+    <ul>
+      {{#each .}}
+        <li>{{.}}</li>
+      {{else}}
+        <li>System Nominal</li>
+      {{/each}}
+    </ul>
+  </ui-display>
+{{/each}}

tgui/src/interfaces/ntosheader.ract

@@ -0,0 +1,30 @@
+<div class='item' style="float: left">
+	<table><tr>
+	{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
+		<td><img src='{{data.PC_batteryicon}}'>
+	{{/if}}
+	{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
+		<td><b>{{data.PC_batterypercent}}</b>
+	{{/if}}
+	{{#if data.PC_ntneticon}}
+		<td><img src='{{data.PC_ntneticon}}'>
+	{{/if}}
+	{{#if data.PC_apclinkicon}}
+		<td><img src='{{data.PC_apclinkicon}}'>
+	{{/if}}
+	{{#if data.PC_stationtime}}
+		<td><b>{{data.PC_stationtime}}</b>
+	{{/if}}
+	{{#each data.PC_programheaders}}
+		<td><img src='{{icon}}'>
+	{{/each}}
+	</table>
+</div>
+<div style="float: right; margin-top: 5px">
+	<ui-button action='PC_shutdown'>Shutdown</ui-button>
+	{{#if data.PC_showexitprogram}}
+		<ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
+		<ui-button action='PC_minimize'>Minimize Program</ui-button>
+	{{/if}}
+</div>
+<div style="clear: both">

tgui/src/interfaces/revelation.ract

@@ -1,60 +0,0 @@
-
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
-
-<ui-display>
-	<div class='item'>
-		<div class='itemLabel'>
-			Payload status:
-		</div>
-		<div class='itemContent'>
-			{{#if data.armed}}
-				ARMED
-			{{else}}
-				DISARMED
-			{{/if}}
-		</div>
-		<div class='itemLabel'>
-			Controls:
-		</div>
-		<div class='itemContent'>
-			<table>
-			<tr><td><ui-button action='PRG_obfuscate'>OBFUSCATE PROGRAM NAME</ui-button>
-			<tr><td><ui-button action='PRG_arm' state='{{data.armed ? "danger" : null}}'>{{data.armed ? "DISARM" : "ARM"}}</ui-button>
-			<ui-button icon='radiation' state='{{data.armed ? null : "disabled"}}' action='PRG_activate'>ACTIVATE</ui-button>
-			</table>
-		</div>
-	</div>
-</ui-display>

tgui/src/interfaces/station_alert_prog.ract

@@ -1,47 +0,0 @@
-
-<div style="float: left">
-	<div class='item'>
-		<table><tr>
-		{{#if data.PC_batteryicon && data.PC_showbatteryicon}}
-			<td><img src='{{data.PC_batteryicon}}'>
-		{{/if}}
-		{{#if data.PC_batterypercent && data.PC_showbatteryicon}}
-			<td><b>{{data.PC_batterypercent}}</b>
-		{{/if}}
-		{{#if data.PC_ntneticon}}
-			<td><img src='{{data.PC_ntneticon}}'>
-		{{/if}}
-		{{#if data.PC_apclinkicon}}
-			<td><img src='{{data.PC_apclinkicon}}'>
-		{{/if}}
-		{{#if data.PC_stationtime}}
-			<td><b>{{data.PC_stationtime}}<b>
-		{{/if}}
-		{{#each data.PC_programheaders}}
-			<td><img src='{{icon}}'>
-		{{/each}}
-		</table>
-	</div>
-</div>
-<div style="float: right">
-	<table><tr>
-		<td><ui-button action='PC_shutdown'>Shutdown</ui-button>
-		{{#if data.PC_showexitprogram}}
-			<td><ui-button action='PC_exit'>EXIT PROGRAM</ui-button>
-			<td><ui-button action='PC_minimize'>Minimize Program</ui-button>
-		{{/if}}
-	</table>
-</div>
-<div style="clear: both">
-
-{{#each data.alarms:class}}
-  <ui-display title='{{class}} Alarms'>
-    <ul>
-      {{#each .}}
-        <li>{{.}}</li>
-      {{else}}
-        <li>System Nominal</li>
-      {{/each}}
-    </ul>
-  </ui-display>
-{{/each}}