Create basic #home screen for selecting instances
* TODO: create a "+" button to create new (and API for writing config)
This commit is contained in:
parent
fe42df8105
commit
013cb2e96b
|
@ -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>
|
39
css/base.php
39
css/base.php
|
@ -2,7 +2,6 @@
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 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;
|
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;
|
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 {
|
textarea {
|
||||||
max-width: -moz-available;
|
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>
|
</style>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1.9 KiB |
23
index.php
23
index.php
|
@ -9,30 +9,44 @@
|
||||||
<script type="application/javascript" src="js/updateLocale.js"></script>
|
<script type="application/javascript" src="js/updateLocale.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script>window.vars = [];</script>
|
||||||
|
|
||||||
<?php require 'css/base.php' ?>
|
<?php require 'css/base.php' ?>
|
||||||
|
|
||||||
<main>
|
<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>
|
</main>
|
||||||
|
|
||||||
<?php require 'js/base.php' ?>
|
<?php require 'js/base.php' ?>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
function hashProcessor(initial) {
|
function hashProcessor(initial) {
|
||||||
var args = window.location.hash.substring(1).trim().split('/');
|
var args = window.location.hash.substring(1).trim().split('/');
|
||||||
if (args.length > 0 && args[0].trim() === '')
|
if (args.length > 0 && args[0].trim() === '')
|
||||||
args = [];
|
args = [];
|
||||||
|
|
||||||
if (args.length === 0) {
|
if (args.length === 0) {
|
||||||
// no hash arguments
|
window.location.hash = '#home';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
initial = initial || false;
|
initial = initial || false;
|
||||||
const processArgs = function() {
|
const processArgs = function() {
|
||||||
switch (args[0]) {
|
if (document.getElementById('window-'+args[0]) !== null) {
|
||||||
default:
|
if (window['load__'+args[0]] !== undefined) {
|
||||||
console.log(args);
|
E.class.removeAll('.window', 'hidden');
|
||||||
|
E.class.addAll('.window', 'hidden');
|
||||||
|
document.getElementById('window-'+args[0]).classList.remove('hidden');
|
||||||
|
window['load__'+args[0]](args);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
processArgs();
|
processArgs();
|
||||||
|
@ -59,6 +73,7 @@ window.onload = function(e) {
|
||||||
yy: "%s Y"
|
yy: "%s Y"
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
hashProcessor();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -41,6 +41,12 @@ var E = {
|
||||||
query.remove();
|
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) {
|
function isVisible(element) {
|
||||||
|
@ -100,6 +106,9 @@ function _get_func_params(func) {
|
||||||
return params;
|
return params;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function capitalize(str) {
|
||||||
|
return str[0].toUpperCase() + str.substring(1);
|
||||||
|
}
|
||||||
function printstack() { console.error(new Error().stack) }
|
function printstack() { console.error(new Error().stack) }
|
||||||
function uuidv4() {
|
function uuidv4() {
|
||||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||||
|
|
Loading…
Reference in New Issue