Next_Station_Plugin/src/Widget/RoomWidget.ts

import CollapsibleTitledSection from "Lualibs/CollapsibleTitledSection";
import LabeledTextInput from "Lualibs/LabeledTextInput";
import VerticallyScalingListFrame from "Lualibs/VerticallyScalingListFrame";
import VerticalScrollingFrame from "Lualibs/VerticalScrollingFrame";
import { syncGuiColors } from "Utils/Gui";
import { RoomConfig } from "Utils/Room";

export class RoomWidget {
	plugin: Plugin;
	model: Folder;
	info: DockWidgetPluginGuiInfo;
	widget: DockWidgetPluginGui;
	noRoomLabel: TextLabel;

	scrollFrame = new VerticalScrollingFrame("RoomScroll");
	listFrame = new VerticallyScalingListFrame("RoomWidget");
	roomCollapse = new CollapsibleTitledSection(
		"roomCollapse", // name suffix of the gui object
		"Room", // the text displayed beside the collapsible arrow
		true, // have the content frame auto-update its size?
		true, // minimizable?
		false, // minimized by default?
	);
	exitCollapse = new CollapsibleTitledSection(
		"ExitCollapse", // name suffix of the gui object
		"Exit", // title text of the collapsible arrow
		true, // have the content frame auto-update its size?
		true, // minimizable?
		false, // minimized by default?
	);

	roomIdValue = new Instance("IntValue");
	roomIdInput = new LabeledTextInput(
		"RoomId", // name suffix of gui object
		"Room Id", // title text of the multi choice
		"0", // default value
	);
	roomTypeValue = new Instance("StringValue");
	roomTypeInput = new LabeledTextInput(
		"RoomType", // name suffix of gui object
		"Room Type", // title text of the multi choice
		"", // default value
	);
	constructor(plugin: Plugin, model: Folder) {
		this.plugin = plugin;
		this.model = model;

		this.info = new DockWidgetPluginGuiInfo(Enum.InitialDockState.Left, false, false, 200, 300, 150, 150);
		this.widget = plugin.CreateDockWidgetPluginGui("RoomWidget", this.info);
		(this.widget as unknown as { Title: string }).Title = "Room Info";

		this.noRoomLabel = new Instance("TextLabel");
		this.noRoomLabel.Text = "Select a room to use this widget.";
		this.noRoomLabel.Size = new UDim2(1, 0, 1, 0);
		syncGuiColors(this.noRoomLabel);

		this.roomIdInput.SetValueChangedFunction((value) => {
			this.roomIdValue.Value = tonumber(value) ?? 0;
		});

		this.roomTypeInput.SetMaxGraphemes(255);
		this.roomTypeInput.SetValueChangedFunction((value) => {
			this.roomTypeValue.Value = value;
		});

		// Setup Widget
		this.roomIdInput.GetFrame().Parent = this.roomCollapse.GetContentsFrame();
		const textbox = this.roomIdInput.GetFrame().FindFirstChildOfClass("TextBox")!;
		textbox.ClearTextOnFocus = false;
		this.roomTypeInput.GetFrame().Parent = this.roomCollapse.GetContentsFrame();
		const textboxf = this.roomTypeInput.GetFrame().FindFirstChildOfClass("TextBox")!;
		textboxf.ClearTextOnFocus = false;
		this.listFrame.AddChild(this.roomCollapse.GetSectionFrame());
		this.listFrame.AddChild(this.exitCollapse.GetSectionFrame());

		this.listFrame.AddBottomPadding();

		this.listFrame.GetFrame().Parent = this.scrollFrame.GetContentsFrame();
		this.scrollFrame.GetSectionFrame().Parent = this.widget;
		this.noRoomLabel.Parent = this.widget;
	}
	UpdateValue(config: RoomConfig) {
		this.roomIdValue = config.RoomId;
		this.roomIdInput.SetValue(tostring(config.RoomId.Value));
		this.roomTypeValue = config.RoomType;
		this.roomTypeInput.SetValue(config.RoomType.Value);
	}
	SetActive(active: boolean) {
		this.noRoomLabel.Visible = !active;
	}
}