Created tabs and flow for instance <> instance_config

css/base.php

@@ -84,13 +84,33 @@ a {
 	height: 2.5em;
 }
 
+
 #window-instance #tabs {
 	position: relative;
 	z-index: 10;
 }
+#window-instance #tabs .fa {
+	color: #5e5e5e;
+}
+#window-instance #tabs .fa.fa-home {
+	font-size: 1.2em;
+}
 #window-instance #tabs .item {
 	float: left;
 }
+#window-instance #tabs .item:hover {
+	background: #f0f0f0;
+}
+#window-instance #tabs .item:active,
+#window-instance #tabs .item:focus {
+	color: #8203a6 !important;
+}
+#window-instance #tabs .item[data-id="home"] {
+	border-right: 2px solid #5e5e5e;
+}
+#window-instance #tabs .item[data-id="settings"] {
+	border-left: 2px solid #5e5e5e;
+}
 #window-instance #tabs .tab-content {
 	padding: 1em;
 }
@@ -104,6 +124,14 @@ a {
 	margin: 0 auto;
 	padding-top: 1em;
 }
+@media (max-width: 400px) {
+	#window-instance #tabs .item {
+		float: inherit;
+	}
+	#window-instance #tabs .tab-content {
+		padding: .6em;
+	}
+}
 
 #window-instance_config {
 	background: #d7d7d7;

index.php

@@ -19,6 +19,7 @@ window.consts = {
 		},
 	}
 };
+window.view = {};
 </script>
 <script>
 function apcontrol_title(str) {

views/instance.php

@@ -1,8 +1,9 @@
 <div class="hmax">
 	<div id="tabs"></div>
-	<div id="tabs-item">
-		<a href="javascript:{action}">
+	<div id="tabs-item" data-id="{id}">
+		<a href="javascript:window.view.instance.paint('{id}')">
 		<div class="tab-content">
+			<i class="fa fa-{icon} fa-fw"></i>
 			<span>{title}</span>
 		</div>
 		</a>
@@ -13,6 +14,21 @@
 </div>
 
 <script>
+window.view.instance = {
+	show_config: function() {
+		window.location.hash = window.location.hash.replace('#instance/','#instance_config/');
+	},
+	paint: function(content) {
+		switch (content) {
+			case 'home':
+				window.location.hash = '#home';
+				return;
+			case 'settings':
+				return window.view.instance.show_config();
+		}
+		console.log(content);
+	},
+};
 function title__instance() {}
 function load__instance(args) {
 	const hargs = parse_hash_arguments(args[1]);
@@ -25,24 +41,38 @@ function load__instance(args) {
 	const _paint = function() {
 		const menu = [
 			{
-				title: 'Filter users',
-				action: 'alert(&quot;hello&quot;)',
+				id: 'home',
+				title: '',
+				icon: 'home',
 			},
 			{
-				title: 'Filter posts',
-				action: 'alert(&quot;hello&quot;)',
+				id: 'filter-users',
+				title: 'Users filter',
+				icon: 'user',
 			},
 			{
+				id: 'filter-posts',
+				title: 'Posts filter',
+				icon: 'file-text',
+			},
+			{
+				id: 'new-accounts',
 				title: 'New accounts',
-				action: 'alert(&quot;hello&quot;)',
+				icon: 'user-plus',
+			},
+			{
+				id: 'settings',
+				title: hargs['instance'],
+				icon: 'gear',
 			},
 		];
 		E.template('tabs', function(TPL) {
 			var html = '';
 			for (var i = 0; i < menu.length; i++) {
 				var tpl = TPL;
+				tpl = tpl.replaceAll('{id}', menu[i]['id']);
 				tpl = tpl.replaceAll('{title}', menu[i]['title']);
-				tpl = tpl.replaceAll('{action}', menu[i]['action']);
+				tpl = tpl.replaceAll('{icon}', menu[i]['icon']);
 				html += tpl;
 			}
 			return html;
@@ -74,7 +104,7 @@ function load__instance(args) {
 		const musthave = window.consts['instance_config'][hargs['software']]['musthave'];
 		for (var i = 0; i < musthave.length; i++) {
 			if (config[musthave[i]] === undefined) {
-				window.location.hash = window.location.hash.replace('#instance/','#instance_config/');
+				window.view.instance.show_config();
 				return false;
 			}
 		}

views/instance_config.php

@@ -2,8 +2,14 @@
 	<form class="center card" method="POST">
 		<h3 id="title"></h3>
 		<div id="config"></div>
-		<br><input type="submit" class="btn w100"
-			value="Save configuration"/>
+		<br>
+		<div class="flex">
+			<button onclick="event.preventDefault();
+				window.history.back()"
+				class="btn w100">Cancel</button>
+			<input type="submit" class="btn w100"
+				value="Save configuration"/>
+		</div>
 	</form>
 	<div id="config-item">
 		<label for="{field}">{placeholder}:</label>
@@ -13,24 +19,26 @@
 </div>
 
 <script>
-var autofill_fields = {
-	mastodon: function(hargs, config) {
-		E.element('#window-instance_config form').setAttribute('action',
-			`api/v1/config/put/?software=mastodon&instance=${hargs['instance']}`);
-		const fields = window.consts['instance_config']['mastodon']['musthave'];
-		for (var i = 0; i < fields.length; i++) {
-			if (config[fields[i]] !== undefined)
-				E.elemid(`config_${fields[i]}`).value = config[fields[i]];
-		}
-		if (config['instance_url'] === undefined) {
-			http.get('api/v1/network/resolve-instance?hostname='+hargs['instance'],
-			{}, function(js) {
-				if (js['instance'] !== undefined)
-					E.elemid('config_instance_url').value = js['instance'];
-			});
-		}
+window.view.instance_config = {
+	autofill_fields: {
+		mastodon: function(hargs, config) {
+			E.element('#window-instance_config form').setAttribute('action',
+				`api/v1/config/put/?software=mastodon&instance=${hargs['instance']}`);
+			const fields = window.consts['instance_config']['mastodon']['musthave'];
+			for (var i = 0; i < fields.length; i++) {
+				if (config[fields[i]] !== undefined)
+					E.elemid(`config_${fields[i]}`).value = config[fields[i]];
+			}
+			if (config['instance_url'] === undefined) {
+				http.get('api/v1/network/resolve-instance?hostname='+hargs['instance'],
+				{}, function(js) {
+					if (js['instance'] !== undefined)
+						E.elemid('config_instance_url').value = js['instance'];
+				});
+			}
+		},
 	},
-};
+}
 function title__instance_config() {}
 function load__instance_config(args) {
 	const hargs = parse_hash_arguments(args[1]);
@@ -55,7 +63,7 @@ function load__instance_config(args) {
 			return html;
 		});
 		const config = parse_ini_config(window.vars['current_instance']['config']);
-		window.autofill_fields[hargs['software']](hargs, config);
+		window.view.instance_config.autofill_fields[hargs['software']](hargs, config);
 	};
 
 	const _main = function() {