@hotstaq/admin-panel 0.3.6 → 0.3.9

package/docker-compose.yaml

@@ -1,4 +1,3 @@
-version: "3.8"
 services:
   # Used just to make sure the database has started before continuing.
   init-app-database:

package/env-example

@@ -1,7 +1,9 @@
 HTTP_PORT=3243
+JWT_SECRET_KEY=ja789w5hja9w345h98aw3jh48aw34j898
 MYSQL_ROOT_PASSWORD=jlka7sw47aSD234
-DATABASE_SERVER=127.0.0.1
-DATABASE_PORT=3320
+DATABASE_TYPE=mariadb
+DATABASE_SERVER=localhost
+DATABASE_PORT=3322
 DATABASE_USERNAME=5NKVBAt7OrzrumQyQVs
 DATABASE_PASSWORD=1BBrZbKYRUM7oiMA5oY
 DATABASE_SCHEMA=staqapp

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hotstaq/admin-panel",
   "description": "",
-  "version": "0.3.6",
+  "version": "0.3.9",
   "main": "build/index.js",
   "scripts": {
     "start": "hotstaq --hotsite ./HotSite.json --env-file ./.env run --server-type web-api",
@@ -18,12 +18,18 @@
   "license": "MIT",
   "dependencies": {
     "@hotstaq/dataroute": "^0.2.10",
-    "@popperjs/core": "^2.11.6",
-    "bootstrap": "^5.2.3",
-    "chart.js": "^2.9.4",
+    "@hotstaq/userroute": "^0.6.13",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3",
+    "datatables.net": "^2.2.2",
+    "datatables.net-bs5": "^2.2.2",
+    "datatables.net-colreorder-bs5": "^2.0.4",
+    "datatables.net-scroller-bs5": "^2.4.3",
+    "datatables.net-searchbuilder-bs5": "^1.8.2",
+    "datatables.net-select-bs5": "^3.0.0",
     "dotenv": "^10.0.0",
     "feather-icons": "^4.29.0",
-    "jquery": "^3.6.3"
+    "jquery": "^3.7.1"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.6",
@@ -36,14 +42,16 @@
     "@types/mocha": "^10.0.1",
     "@types/node": "^20.14.10",
     "@types/node-fetch": "^2.6.1",
+    "@types/pg": "^8.11.11",
     "@types/selenium-webdriver": "^4.1.5",
     "@types/uuid": "^8.3.4",
     "chokidar": "^3.5.3",
     "ts-loader": "^7.0.5",
     "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.0.1"
   },
   "peerDependencies": {
-    "hotstaq": "^0.8.95"
+    "hotstaq": "^0.8.118"
   }
 }

package/src/AppAPI.ts

@@ -1,17 +1,44 @@
-import { HotAPI, HotServer, HotClient, HotRoute, 
-	HotRouteMethod, MySQLSchema, 
-	ServerAuthorizationFunction, HotStaq, HotServerType, DeveloperMode, HotDBMySQL } from "hotstaq";
-import { DataRoute } from "@hotstaq/dataroute";
+import { HotAPI, HotServer, HotClient, MySQLSchema, HotServerType, HotDBMySQL, HotLog, ServerRequest} from "hotstaq";
+import { AdminRoute, User, UserRoute } from "@hotstaq/userroute";
+
+/**
+ * An admin route that can be used for any user.
+ */
+export class FriendlyAdminRoute extends AdminRoute
+{
+	constructor (api: HotAPI, routeName: string = "admins")
+	{
+		super (api, routeName);
+	}
+
+	/**
+	 * This disables the need to check for authentication.
+	 */
+	protected async checkAuth (req: ServerRequest): Promise<void>
+	{
+	}
+}
 
 /**
  * The App's API and routes.
  */
 export class AppAPI extends HotAPI
 {
-	constructor (baseUrl: string, connection: HotServer | HotClient, db: any = null)
+	/**
+	 * The logger.
+	 */
+	logger: HotLog;
+	/**
+	 * The database connection.
+	 */
+	db: HotDBMySQL;
+
+	constructor (baseUrl: string, connection: HotServer | HotClient, db: HotDBMySQL = null)
 	{
 		super(baseUrl, connection, db);
 
+		this.logger = connection.logger;
+
 		this.onPreRegister = async (): Promise<boolean> =>
 			{
 				if (connection.type !== HotServerType.Generate)
@@ -23,64 +50,34 @@ export class AppAPI extends HotAPI
 			};
 		this.onPostRegister = async (): Promise<boolean> =>
 			{
-				// Sync database tables here.
+				await User.syncTables (this.db, true);
 
-				return (true);
-			};
+				const maxUsers: number = 53;
 
-		this.addRoute (new DataRoute (this, async (db: HotDBMySQL) =>
-			{
-				if (this.connection.processor.mode === DeveloperMode.Development)
+				for (let iIdx = 0; iIdx < maxUsers; iIdx++)
 				{
-					await db.query (
-						`create table if not exists users (
-							id             INT(10)        NOT NULL AUTO_INCREMENT,
-							name           VARCHAR(256)   DEFAULT '',
-							email          VARCHAR(256)   DEFAULT '',
-							password       VARCHAR(256)   DEFAULT '',
-							verified       INT(1)         DEFAULT '0',
-							registered     DATETIME       DEFAULT NOW(),
-							enabled        INT(1)         DEFAULT '1',
-							PRIMARY KEY (id)
-						)`);
-
-					let results: any = await db.queryOne (`select COUNT(*) from users;`);
-
-					if (results.results["COUNT(*)"] < 1)
+					try
 					{
-						let testUsers = [{
-									name: "John",
-									email: "test1@freelight.org",
-									password: "a867h398jdg",
-									verified: true
-								},
-								{
-									name: "Jane",
-									email: "test2@freelight.org",
-									password: "ai97w3a98w3498",
-									verified: true
-								}
-							];
-
-						for (let iIdx = 0; iIdx < testUsers.length; iIdx++)
-						{
-							let testUser = testUsers[iIdx];
-							let verified: number = 0;
-
-							if (testUser.verified === true)
-								verified = 1;
-
-							let result: any = await db.query (
-								`INSERT INTO users (name, email, password, verified) VALUES (?, ?, ?, ?);`, 
-								[testUser.name, testUser.email, testUser.password, verified]);
-
-							if (result.error != null)
-								throw new Error (result.error);
+						let testUser = new User ({
+								displayName: `John${iIdx}`,
+								email: `test${iIdx}@freelight.org`,
+								password: "a867h398jdg",
+								verified: ((iIdx % 2) === 0) ? true : false
+							});
 
-							let id: number = result.results["insertId"];
-						}
+						await testUser.register (this.db);
+						this.logger.info (`Registered user: ${testUser.displayName}`);
+					}
+					catch (ex)
+					{
+						this.logger.error (`Error registering user: ${ex}`);
 					}
 				}
-			}));
+
+				return (true);
+			};
+
+		this.addRoute (new UserRoute (this, "users"));
+		this.addRoute (new FriendlyAdminRoute (this, "admins"));
 	}
 }

package/src/WebExport.ts

@@ -3,9 +3,14 @@ async function buildAssets (): Promise<any>
 	return ({
 			import: ["@popperjs/core", 
 				{ name: "jquery", files: ["jquery.min.js"] }, 
-				"chart.js", 
-				"feather-icons", 
-				{ name: "bootstrap", files: ["bootstrap.min.js", "bootstrap.min.css"] }],
+				"feather-icons",
+				{ name: "bootstrap", files: ["bootstrap.min.js", "bootstrap.min.css"] }, 
+				"datatables.net", 
+				"datatables.net-bs5",
+				"datatables.net-colreorder-bs5",
+				"datatables.net-scroller-bs5",
+				"datatables.net-searchbuilder-bs5",
+				"datatables.net-select-bs5"],
 			html: ["./assets/html/*.*"],
 			css: ["./assets/css/*.*"],
 			js: ["./assets/js/*.*", "./build-web/AdminPanelComponents.js"],

package/src/components/admin-edit.ts

@@ -195,10 +195,28 @@ export class AdminEdit extends HotComponent
 	 */
 	onEditClicked: () => Promise<boolean> = null;
 
+	/**
+	 * Get the attached lists.
+	 */
+	getAttachedLists (): HTMLElement[]
+	{
+		const strs = this.attached_list.split (",");
+		const attachedLists: HTMLElement[] = [];
+
+		for (let i = 0; i < strs.length; i++)
+		{
+			const attachedList = strs[i];
+			let attachedListObj = document.getElementById (attachedList);
+			attachedLists.push (attachedListObj);
+		}
+
+		return (attachedLists);
+	}
+
 	/**
 	 * Executes when the edit button is clicked.
 	 */
-	async editClicked (selectedFields: any[] = []): Promise<void>
+	async editClicked (attachedList: AdminTable, selectedFields: any[] = []): Promise<void>
 	{
 		if (this.onEditClicked != null)
 		{
@@ -214,12 +232,8 @@ export class AdminEdit extends HotComponent
 
 		if (this.attached_list !== "")
 		{
-			let attachedList = document.getElementById (this.attached_list);
-
-			// @ts-ignore
-			let hotComponent: AdminTable = attachedList.hotComponent;
-			hotComponent.attachedEdit = this;
-			let selectedField = hotComponent.getSelected ();
+			attachedList.attachedEdit = this;
+			let selectedField = attachedList.getSelected ();
 
 			if (selectedField != null)
 			{
@@ -289,25 +303,30 @@ export class AdminEdit extends HotComponent
 
 		if (this.attached_list !== "")
 		{
-			let attachedList = document.getElementById (this.attached_list);
-			// @ts-ignore
-			hotComponent = attachedList.hotComponent;
-			hotComponent.attachedEdit = this;
-			let checkedRows = hotComponent.getCheckedRows ();
+			const attachedLists = this.getAttachedLists ();
 
-			if (checkedRows.length > 0)
+			for (let iIdx = 0; iIdx < attachedLists.length; iIdx++)
 			{
-				for (let i = 0; i < checkedRows.length; i++)
+				let attachedList = attachedLists[iIdx];
+				// @ts-ignore
+				hotComponent = attachedList.hotComponent;
+				hotComponent.attachedEdit = this;
+				let checkedRows = hotComponent.getCheckedRows ();
+
+				if (checkedRows.length > 0)
 				{
-					let checkedRow = checkedRows[i];
-					whereFields.push (checkedRow);
+					for (let i = 0; i < checkedRows.length; i++)
+					{
+						let checkedRow = checkedRows[i];
+						whereFields.push (checkedRow);
+					}
 				}
-			}
 
-			let selectedField = hotComponent.getSelected ();
+				let selectedField = hotComponent.getSelected ();
 
-			if (selectedField != null)
-				whereFields = [selectedField];
+				if (selectedField != null)
+					whereFields = [selectedField];
+			}
 		}
 
 		const confirmed: boolean = confirm ("Are you sure you want to remove this item?");
@@ -488,13 +507,18 @@ export class AdminEdit extends HotComponent
 
 		if (this.attached_list !== "")
 		{
-			let attachedList = document.getElementById (this.attached_list);
-			// @ts-ignore
-			let table: AdminTable = attachedList.hotComponent;
+			const attachedLists = this.getAttachedLists ();
 
-			table.attachedEdit = this;
+			for (let iIdx = 0; iIdx < attachedLists.length; iIdx++)
+			{
+				let attachedList = attachedLists[iIdx];
+				// @ts-ignore
+				let table: AdminTable = attachedList.hotComponent;
 
-			await table.refreshList ();
+				table.attachedEdit = this;
+
+				await table.refreshList ();
+			}
 		}
 
 		if (this.closeOnSave === true)
@@ -519,12 +543,17 @@ export class AdminEdit extends HotComponent
 			{
 				if (this.attached_list !== "")
 				{
-					let attachedList = document.getElementById (this.attached_list);
-					// @ts-ignore
-					let table: AdminTable = attachedList.hotComponent;
+					const attachedLists = this.getAttachedLists ();
+		
+					for (let iIdx = 0; iIdx < attachedLists.length; iIdx++)
+					{
+						let attachedList = attachedLists[iIdx];
+						// @ts-ignore
+						let table: AdminTable = attachedList.hotComponent;
 
-					if (table != null)
-						table.attachedEdit = this;
+						if (table != null)
+							table.attachedEdit = this;
+					}
 				}
 			}, 50);
 

package/src/components/admin-table-field.ts

@@ -76,7 +76,7 @@ export class AdminTableField extends HotComponent
 		}
 
 		return ([{
-			html: `<th>${this.inner}</th>`,
+			html: `<th data-field = "${this.field}" data-field-type = "${this.field_type}">${this.inner}</th>`,
 			placeHereParent: "header"
 		}]);
 	}