From 013cb2e96b1c33a013176e39e52ebe86bd766c72 Mon Sep 17 00:00:00 2001
From: Bofh <bofh@nogafam.es>
Date: Wed, 23 Nov 2022 01:18:34 +0100
Subject: [PATCH] Create basic #home screen for selecting instances

* TODO: create a "+" button to create new (and API for writing config)
---
 app/home.php              |  37 ++++++++++++++++++++++++++++++++++++
 css/base.php              |  39 +++++++++++++++++++++++++++++++++++++-
 img/software-mastodon.png | Bin 0 -> 1986 bytes
 index.php                 |  23 ++++++++++++++++++----
 js/base.php               |   9 +++++++++
 5 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 app/home.php
 create mode 100644 img/software-mastodon.png

diff --git a/app/home.php b/app/home.php
new file mode 100644
index 0000000..378eaa1
--- /dev/null
+++ b/app/home.php
@@ -0,0 +1,37 @@
+<div class="flex hmax">
+	<div id="instances" class="center">
+	</div>
+	<div id="instances-item">
+		<a href="#instance/software={software};instance={instance}">
+		<div class="flex">
+			<img data-src="img/software-{software}.png"/>
+			<div class="flex" style="padding: 0 2em">
+				<span class="center">{instance}</span>
+			</div>
+		</div>
+		</a>
+	</div>
+</div>
+
+<script>
+function load__home() {
+	http.get('api/v1/config/get',{},function(data) {
+		window.vars['instance_config'] = JSON.parse(data);
+		E.template('instances', function(TPL) {
+			var html = '';
+			for (var i = 0; i < window.vars.instance_config['supported_ap_software'].length; i++) {
+				var tpl = TPL;
+				const soft = window.vars.instance_config['supported_ap_software'][i];
+				for (var j = 0; j < window.vars.instance_config['hosts'][soft].length; j++) {
+					const hostcfg = window.vars.instance_config['hosts'][soft][j];
+					tpl = tpl.replaceAll('{software}',			soft);
+					tpl = tpl.replaceAll('{software:cap}',		capitalize(soft));
+					tpl = tpl.replaceAll('{instance}',			hostcfg['instance']);
+					html += tpl;
+				}
+			}
+			return html;
+		});
+	});
+}
+</script>
diff --git a/css/base.php b/css/base.php
index f14a601..28effc3 100644
--- a/css/base.php
+++ b/css/base.php
@@ -2,7 +2,6 @@
 body {
 	padding: 0;
 	margin: 0;
-	padding-top: 1em;
 	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,"mastodon-font-sans-serif",sans-serif;
 }
 
@@ -34,7 +33,45 @@ body {
 	background: #9b1919;
 }
 
+.window.hidden { display: none !important }
+*[id*="-item"] { display: none !important }
+
+.flex { display: flex }
+.center { margin: auto }
+.wmax { width: 100vw }
+.hmax { height: 100vh }
+
 textarea {
 	max-width: -moz-available;
 }
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+
+/* specific styles */
+#window-home {
+	background: #d7d7d7;
+}
+#window-home #instances .item {
+	padding: .5em;
+	background: #fff;
+	border-radius: .5em;
+	box-shadow: 0px 0px .5em #0000004f;
+	margin-top: .5em;
+}
+#window-home #instances .item:hover {
+	background: #f9f9f9;
+}
+#window-home #instances .item:active,
+#window-home #instances .item:focus {
+	background: #dfdfdf;
+}
+#window-home #instances .item img {
+	width: 2.5em;
+	height: 2.5em;
+}
+
 </style>
diff --git a/img/software-mastodon.png b/img/software-mastodon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3eab906142afc23524e3dfa91938562bf927e56
GIT binary patch
literal 1986
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
Uhh#SWSO5S307*qoM6N<$f-DNmdjJ3c

literal 0
HcmV?d00001

diff --git a/index.php b/index.php
index a17ca05..ead5e1c 100644
--- a/index.php
+++ b/index.php
@@ -9,30 +9,44 @@
 	<script type="application/javascript" src="js/updateLocale.js"></script>
 </head>
 <body>
+<script>window.vars = [];</script>
 
 <?php require 'css/base.php' ?>
 
 <main>
+<?php foreach (scandir('./app') as $t): ?>
+	<?php if (!in_array($t,['.','..']) && substr($t, -4) === '.php'): ?>
+	<div id="window-<?php echo substr($t, 0, -4) ?>"
+		class="window hidden">
+		<?php require './app/'.$t ?>
+	</div>
+	<?php endif ?>
+<?php endforeach ?>
 </main>
 
 <?php require 'js/base.php' ?>
 
 <script>
+
 function hashProcessor(initial) {
 	var args = window.location.hash.substring(1).trim().split('/');
 	if (args.length > 0 && args[0].trim() === '')
 		args = [];
 
 	if (args.length === 0) {
-		// no hash arguments
+		window.location.hash = '#home';
 		return;
 	}
 
 	initial = initial || false;
 	const processArgs = function() {
-		switch (args[0]) {
-			default:
-				console.log(args);
+		if (document.getElementById('window-'+args[0]) !== null) {
+			if (window['load__'+args[0]] !== undefined) {
+				E.class.removeAll('.window', 'hidden');
+				E.class.addAll('.window', 'hidden');
+				document.getElementById('window-'+args[0]).classList.remove('hidden');
+				window['load__'+args[0]](args);
+			}
 		}
 	};
 	processArgs();
@@ -59,6 +73,7 @@ window.onload = function(e) {
 			yy: "%s Y"
 		}
 	});
+	hashProcessor();
 }
 </script>
 </body>
diff --git a/js/base.php b/js/base.php
index a8ade93..7843e6e 100644
--- a/js/base.php
+++ b/js/base.php
@@ -41,6 +41,12 @@ var E = {
 			query.remove();
 		}
 	},
+	template: function(_id, cback) {
+		var tpl = E.elemid(_id+'-item').outerHTML;
+		tpl = tpl.replace('id="'+_id+'-item"','class="item"');
+		tpl = tpl.replace('data-src=', 'src=');
+		E.elemid(_id).innerHTML = cback(tpl);
+	},
 };
 
 function isVisible(element) {
@@ -100,6 +106,9 @@ function _get_func_params(func) {
 	return params;
 }
 
+function capitalize(str) {
+	return str[0].toUpperCase() + str.substring(1);
+}
 function printstack() { console.error(new Error().stack) }
 function uuidv4() {
 	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {