interverse/Client/index.html

163 lines
6.3 KiB
HTML
Raw Normal View History

2022-01-25 23:28:06 -05:00
<!DOCTYPE html>
<html>
2022-03-03 14:22:04 -05:00
2022-01-25 23:28:06 -05:00
<head>
<link rel="stylesheet" href="/theme.css">
2022-01-25 23:31:54 -05:00
<title>Interverse</title>
2022-03-03 14:22:04 -05:00
<script src="https://unpkg.com/alpinejs" defer></script>
2022-01-25 23:28:06 -05:00
<script src="/helper.js"></script>
</head>
2022-03-03 14:22:04 -05:00
2022-01-25 23:28:06 -05:00
<body>
<div class="interverse" x-data x-if="Alpine.store('data')">
<div id="interverse-details">
<img x-bind:src="Alpine.store('data')['image']">
2022-03-15 10:48:04 -04:00
<div id="interverse-contact">
<h1 x-text="Alpine.store('data')['name']"></h1>
<template x-for="key in Object.keys(Alpine.store('data')['contact'])">
<p>
<strong x-text="key"></strong>
<span x-text="Alpine.store('data')['contact'][key]"></span>
</p>
</template>
</div>
2022-01-25 23:28:06 -05:00
</div>
2022-05-02 22:02:15 -04:00
<section id="interverse-resource-groups">
<template x-for="(group,name) in Alpine.store('data')['resource_groups']">
<div>
<h1 x-text="name"></h1>
<section class="interverse-group">
<template x-for="resource in group">
<a x-bind:href="resource['location']">
<div class="interverse-resource">
<template x-if="resource['icon'] !=''">
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
</template>
<h2 x-text="resource['label']"></h2>
<p x-text="resource['description']"></p>
</div>
</a>
</template>
</section>
</div>
</template>
</section>
<div id="interverse-resources">
<template x-for="resource in Alpine.store('data')['resources']">
2022-01-25 23:28:06 -05:00
<a x-bind:href="resource['location']">
<div class="interverse-resource">
2022-01-26 04:20:24 -05:00
<template x-if="resource['icon'] !=''">
<img class="interverse-resource-icon" x-bind:src="resource['icon']">
</template>
2022-05-02 22:02:15 -04:00
<h2 x-text="resource['label']"></h2>
<p x-text="resource['description']"></p>
</div>
</a>
</template>
2022-03-03 14:22:04 -05:00
</div>
<div id="interverse-groups">
<template x-for="(group,name) in Alpine.store('data')['connection_groups']">
2022-01-30 12:01:20 -05:00
<div>
<h3 x-text="name"></h3>
<div class="interverse-group">
<template x-for="link in group">
<div class="interverse-connection" x-data="{connected:false">
<template x-if="Alpine.store(link)['name'] !=''">
<div class='interverse-connection-preview' x-on:click="initialize(link+'/.well-known/interverse')">
<h3 x-text="Alpine.store(link)['name']"></h3>
<img x-bind:src="Alpine.store(link)['image']">
<a x-bind:href="link" x-text="link"></a>
</div>
</template>
2022-03-03 14:22:04 -05:00
<template x-if="Alpine.store(link) == undefined">
2022-01-30 12:01:20 -05:00
<div>
2022-01-30 15:39:51 -05:00
<a x-bind:href="link" x-text="link">
</a>
2022-01-30 12:01:20 -05:00
</div>
</template>
2022-03-03 14:22:04 -05:00
</div>
</template>
</div>
</div>
</template>
</div>
<h2>Links</h2>
<div id="interverse-connections">
<template x-for="connection in Alpine.store('data')['connections']">
2022-01-25 23:28:06 -05:00
<div class="interverse-connection" >
<template x-if="Alpine.store(connection)['version'] >=0">
<div x-on:click="initialize(connection+'/.well-known/interverse')">
<h3 x-text="Alpine.store(connection)['name']"></h3>
2022-01-26 04:20:24 -05:00
<template x-if="Alpine.store(connection)['image']!=''">
<img x-bind:src="Alpine.store(connection)['image']">
</template>
2022-03-03 14:22:04 -05:00
</div>
</template>
<template x-if="name == ''">
2022-01-25 23:28:06 -05:00
<a x-bind:href="connection" x-text="connection"></a>
</template>
2022-03-03 14:22:04 -05:00
</div>>
</template>
</div>
<div id="interverse-contact">
<template x-for="contact in Alpine.store('data')['contact']">
2022-01-25 23:28:06 -05:00
<div class="interverse-contact">
</div>
</template>
2022-03-03 14:22:04 -05:00
</div>
2022-01-25 23:28:06 -05:00
</div>
<script>
2022-03-03 14:22:04 -05:00
var main_url = "/.well-known/interverse";
if (getUrlParameter('s') && getUrlParameter("url")) {
2022-01-25 23:28:06 -05:00
var uri = "";
2022-03-03 14:22:04 -05:00
main_url = getUrlParameter('s') + "://" + getUrlParameter("url") + '/.well-known/interverse';
} else {
if (getUrlParameter('url')) {
main_url = "https://" + getUrlParameter('url') + '/.well-known/interverse';
2022-01-25 23:28:06 -05:00
}
}
2022-03-03 14:22:04 -05:00
document.addEventListener('alpine:init', function() {
2022-01-25 23:28:06 -05:00
initialize(main_url);
});
2022-03-03 14:22:04 -05:00
function initialize(url) {
Alpine.store("data", {});
fetchdata(url, function(e) {
2022-01-25 23:28:06 -05:00
data = JSON.parse(e.target.response);
2022-01-30 12:01:20 -05:00
raw_data = JSON.parse(e.target.response);
2022-03-03 14:22:04 -05:00
Alpine.store("data", data);
2022-01-30 12:01:20 -05:00
var connections = raw_data['connections'];
2022-03-03 14:22:04 -05:00
for (group in data['connection_groups']) {
for (link in data['connection_groups'][group]) {
2022-01-30 12:01:20 -05:00
connections.push(data['connection_groups'][group][link]);
}
}
2022-03-03 14:22:04 -05:00
for (var i = 0; i < connections.length; i++) {
fetchdata(connections[i] + '/.well-known/interverse', function(e) {
try {
2022-01-25 23:28:06 -05:00
dat = JSON.parse(e.target.response);
console.log(dat);
2022-03-03 14:22:04 -05:00
Alpine.store(dat['location'], dat);
} catch {
2022-01-25 23:28:06 -05:00
console.log("Failed to parse connection JSON");
}
});
}
2022-03-03 14:22:04 -05:00
2022-01-25 23:28:06 -05:00
});
}
</script>
</body>
</html>