Create basic #home screen for selecting instances

* TODO: create a "+" button to create new (and API for writing config)
This commit is contained in:
Bofh 2022-11-23 01:18:34 +01:00
parent fe42df8105
commit 013cb2e96b
5 changed files with 103 additions and 5 deletions

37
app/home.php Normal file
View File

@ -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>

View File

@ -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>

BIN
img/software-mastodon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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>

View File

@ -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) {