From 63030826ccf854919e0fc8d08080675ff2bd4712 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Fri, 17 Oct 2025 12:42:37 -0400
Subject: [PATCH] We have a working DOM.

---
 snw_ui/snw_ui/page/install/install.html |  7 ++--
 snw_ui/snw_ui/page/install/install.js   | 54 ++++++++++++++-----------
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/snw_ui/snw_ui/page/install/install.html b/snw_ui/snw_ui/page/install/install.html
index f86bf30..f506c8d 100644
--- a/snw_ui/snw_ui/page/install/install.html
+++ b/snw_ui/snw_ui/page/install/install.html
@@ -1,6 +1,5 @@
-<div class="sidebar">
-	<p>Contacts</p>
+<div id="sidebar">
 </div>
-<div class="page">
-<p>Hello, World!</p>
+<div id="page">
+<H2>Hello, World!</H2>
 </div>
diff --git a/snw_ui/snw_ui/page/install/install.js b/snw_ui/snw_ui/page/install/install.js
index 1c7fc59..d166992 100644
--- a/snw_ui/snw_ui/page/install/install.js
+++ b/snw_ui/snw_ui/page/install/install.js
@@ -1,21 +1,21 @@
-frappe.pages['install'].on_page_load = function(wrapper) {
-	new InstallPage(wrapper);
-	new Controller(new Model(), new View());
-}
+frappe.provide("frappe.snw_ui");
 
-InstallPage = Class.extend({
-	init: function(wrapper) {
-		this.page = frappe.ui.make_app_page({
-			parent: wrapper,
-			title: 'Sprinklers Northwest Install',
-			single_column: true
-		});
-		this.make();
-	},
-	make: function() {
-		$(frappe.render_template("install", this)).appendTo(this.page.main);
-	}
-})
+frappe.pages['install'].on_page_load = function(wrapper) {
+	let page = frappe.ui.make_app_page({
+		parent: wrapper,
+		title: 'Sprinklers Northwest Install',
+		single_column: true
+		//const page = $(wrapper)
+		//const sidebar = page.find('.sidebar')
+		//install_page = new InstallPage(wrapper);
+		//new Controller(new Model(), new View(install_page.page));
+	});
+	$(frappe.render_template("install", page)).appendTo(page.main);
+
+	console.log(page);
+	console.log(page.parent);
+	new Controller(new Model(), new View(page.parent));
+}
 
 class Model {
 	constructor() {
@@ -28,18 +28,26 @@ class Model {
 }
 
 class View {
-	constructor() {
-		this.$sidebar = $("#sidebar");
-		this.$page = $("#page");
+	constructor(page) {
+		console.log(page)
+		this.$sidebar = $("#sidebar", page);
+		console.log(this.$sidebar)
+		//this.sidebar = page.find('#sidebar')
+
+		//this.$page = $("#page");
 	}
 
 	set_sidebar_categories(categories) {
-		$.each(categories, function(category) {
-			const $button = $("<button></button>");
-			$button.text(category);
+		console.log("Set Categories:");
+		console.log(this.$sidebar);
+		$.each(categories, (index) => {
+			const $button = $(`<button>${categories[index]}</button>`);
+			console.log($button);
 			$button.addClass("sidebar-button");
 			this.$sidebar.append($button);
 		})
+
+		console.log(this.$sidebar);
 	}
 }