soselo/views/home.php

<div class="flex hmax">
	<div class="center">
		<div id="instances"></div>
		<div id="instances-item">
			<a href="#instance/software={software};instance={instance};content=filter-users">
				<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 class="flex" style="margin-top: .5em">
			<button class="btn green center w100"
				onclick="window.location.hash = '#add'">
				<i class="fa fa-plus fa-fw"></i>New instance
			</button>
		</div>
	</div>
</div>

<script>
function title__home() { apcontrol_title('Panel') }
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++) {
				const soft = window.vars.instance_config['supported_ap_software'][i];
				for (var j = 0; j < window.vars.instance_config['hosts'][soft].length; j++) {
					var tpl = TPL;
					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>