interverse/Client/index.html

<style>
.interverse{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left:5vw;
    margin-right:5vw;
}

#interverse-details{
    font-size:1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
}
#interverse-details>*{
    margin:1rem;
}
#interverse-resource-groups{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
}
#interverse-resource-groups>*{
    margin:1rem;
}

#interverse-groups h3{
    text-align: center;
    font-size:2rem;
}
#interverse-resource-groups img{

max-height:5rem;
max-width: 5rem;
}
#interverse-resources{
    display: flex;
    flex-direction: row;
    max-width: 100%;
}
#interverse-resources>*{
    margin:1rem;
}
#interverse-resources img{

    max-height:5rem;
    max-width: 5rem;
}
#interverse-groups{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;

}
.interverse-connection-group{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#interverse-connections{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#interverse-connections>*{
    margin:5px;
}
@keyframes glow{
    from {box-shadow: 0rem 0rem 0.25rem transparent;}
    to {box-shadow: 0rem 0rem 1.5rem rgb(7, 129, 229);}
}
.interverse-connection-preview{

    animation: glow 1s alternate;
    animation-iteration-count: infinite;
}
.interverse-connection-preview,.interverse-connection{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin:1rem;
}
.interverse-connection-preview>*{
    margin:1rem;
}
a{
    font-weight: bolder;
}
.interverse-connection-preview img{
    max-height:15rem;
    max-width: 15rem;
}
</style>
<script src="https://unpkg.com/alpinejs" defer></script>
<script src="/helper.js"></script>
<div class="interverse" x-data x-if="Alpine.store('data')">
    <section id="interverse-details">
        <img x-bind:src="Alpine.store('data')['image']">
        <div id="interverse-contact">
            <h1 x-text="Alpine.store('data')['name']"></h1>

            <a x-bind:href="Alpine.store('data')['location']" x-text="Alpine.store('data')['location']"></a>
            <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>
    </section>
    <section id="interverse-resource-groups">
        <template x-for="(group,name) in Alpine.store('data')['resource_groups']">
            <div class="interverse-resource">
                <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']">
            <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>
    </div>
    <div id="interverse-groups">
        <template x-for="(group,name) in Alpine.store('data')['connection_groups']">
            <div>
                <h3 x-text="name"></h3>
                <div class="interverse-connection-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)">
                                    <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>
                            <template x-if="Alpine.store(link) == undefined">
                                <div>
                                    <a x-bind:href="link" x-text="link">

                                    </a>

                                </div>

                            </template>
                        </div>
                    </template>
                </div>

            </div>
        </template>
    </div>
    <div id="interverse-connections">
        <template x-for="connection in Alpine.store('data')['connections']">
            <div class="interverse-connection">
                <template x-if="Alpine.store(connection)['name']">
                    <div x-on:click="initialize(connection)">
                        <h3 x-text="Alpine.store(connection)['name']"></h3>
                        <template x-if="Alpine.store(connection)['image']!=''">
                            <img x-bind:src="Alpine.store(connection)['image']">
                        </template>
                    </div>
                </template>
                <template x-if="Alpine.store(link) == undefined">
                    <a x-bind:href="connection" x-text="connection"></a>
                </template>

            </div>>
        </template>
    </div>
    <div id="interverse-contact">
        <template x-for="contact in Alpine.store('data')['contact']">
            <div class="interverse-contact">

            </div>

        </template>
    </div>

</div>

<script>
    var t = new Date();
    var timestamp = t.getTime();
    var main_url = window.location.host;
    var interverse_proxy="http://localhost:5000"
    if  (getUrlParameter("url")) {
        main_url = getUrlParameter("url") 
    }
    document.addEventListener('alpine:init', function () {
        initialize(main_url);
    });

    function initialize(url) {
        Alpine.store("data", {});
        interverse_data(url.replace("https://",'').replace('http://','').replace('/',''), function (data) {
            console.log("Initializing interverse...")
            Alpine.store('data',data);
            for (group in data['connection_groups']) {
                for (link in data['connection_groups'][group]) {
                    url = data['connection_groups'][group][link];
                    console.log("Connection: "+url)
                    interverse_data(url.replace("https://",'').replace('http://','').replace('/',''),function(data){
                        Alpine.store(data['location'],data)
                    });
                    //connections.push(data['connection_groups'][group][link]);
                }
            }
            var connections = data['connections'];
            for (var i = 0; i < connections.length; i++) {
                url = connections[i].replace("https://",'').replace('http://','').replace('/','')
                interverse_data(url,function(data){
                    if (data['location']){
                    Alpine.store(data['location'],data);

                    }
                });
            }

        });
    }
</script>