Upgrades vault controller to tgui-next.

code/modules/ruins/spaceruin_code/TheDerelict.dm

@@ -38,6 +38,9 @@
 	var/siphoned_power = 0
 	var/siphon_max = 1e7
 
+	ui_x = 300
+	ui_y = 120
+
 
 /obj/machinery/computer/monitor/examine(mob/user)
 	. = ..()
@@ -130,7 +133,7 @@
 											datum/tgui/master_ui = null, datum/ui_state/state = GLOB.default_state)
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "vault_controller", name, 300, 150, master_ui, state)
+		ui = new(user, src, ui_key, "vault_controller", name, ui_x, ui_y, master_ui, state)
 		ui.open()
 
 

tgui-next/packages/tgui/components/ProgressBar.js

@@ -16,9 +16,9 @@ export const ProgressBar = props => {
           'width': (clamp(value, 0, 1) * 100) + '%',
         }} />
       <div className="ProgressBar__content">
-        {value && !hasContent && toFixed(value * 100) + '%'}
-        {content}
-        {children}
+        {hasContent
+          ? (content || children)
+          : (toFixed(value * 100) + '%')}
       </div>
     </div>
   );

tgui-next/packages/tgui/interfaces/VaultController.js

@@ -0,0 +1,30 @@
+import { Fragment } from 'inferno';
+import { act } from '../byond';
+import { toFixed } from 'common/math';
+import { Button, Section, LabeledList, ProgressBar } from '../components';
+
+export const VaultController = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  return (
+    <Section
+      title="Lock Status: "
+      buttons={
+        <Button
+          content={data.doorstatus ? "Locked" : "Unlocked"}
+          disabled={data.stored < data.max}
+          onClick={() => act(ref, 'togglelock')}
+        />
+      }>
+      <LabeledList>
+        <LabeledList.Item label="Charge">
+          <ProgressBar
+            value={data.stored / data.max }
+            content={toFixed(data.stored/1000) + ' / ' + data.max/1000 + ' kW'}
+          />
+        </LabeledList.Item>
+      </LabeledList>
+    </Section>
+  );
+};

tgui-next/packages/tgui/routes.js

@@ -22,6 +22,7 @@ import { KitchenSink } from './interfaces/KitchenSink';
 import { ThermoMachine } from './interfaces/ThermoMachine';
 import { Wires } from './interfaces/Wires';
 import { Mint } from './interfaces/Mint';
+import { VaultController} from './interfaces/VaultController';
 
 const ROUTES = {
   airalarm: {
@@ -116,6 +117,10 @@ const ROUTES = {
     component: () => Mint,
     scrollable: false,
   },
+  vault_controller: {
+    component: () => VaultController,
+    scrollable: false,
+  },
 };
 
 export const getRoute = state => {