Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-06 19:59:28 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Explore app metaverse api updates

Browse source 
Blended the metaverse api places data in to the list with the beacon data. Also lightened the icons at the top as they were a little lost.
This commit is contained in:
Martin Allerton 2021-08-18 23:54:23 +01:00
parent d179e70671
commit 481125f978
2 changed files with 103 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

138
scripts/communityScripts/explore/explore.html
View file

@ -13,8 +13,18 @@
#component-templates { #component-templates {
display: none; display: none;
} }
.thumbnailItem .d-flex {
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px);
text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}
.thumbnailItemHover .d-flex {
background: rgba(100, 100, 100, 0.2);
}
</style> </style>
<!--<script src="js/TestEventBridge.js"></script>--> <!--<script src="../Explore/js/TestEventBridge.js"></script>-->
</head> </head>
<body> <body>
<div id="component-templates"> <div id="component-templates">
@ -22,7 +32,7 @@
<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition"> <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn color="grey darken-3" class="ml-5" v-show="permission" value="animations" v-bind="attrs" v-on="on" fab small> <v-btn color="grey darken-3" class="ml-5" v-show="permission" value="animations" v-bind="attrs" v-on="on" fab small>
<v-icon color="purple">mdi-map-plus</v-icon> <v-icon color="purple lighten-2">mdi-map-plus</v-icon>
</v-btn> </v-btn>
</template> </template>
<v-card> <v-card>
@ -30,7 +40,7 @@
<v-btn icon dark @click="closeDialog();"> <v-btn icon dark @click="closeDialog();">
<v-icon>mdi-close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
<v-toolbar-title>Add Location</v-toolbar-title> <v-toolbar-title>Add Location Beacon</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-toolbar-items> <v-toolbar-items>
<v-btn dark text @click="addLocation()">Save</v-btn> <v-btn dark text @click="addLocation()">Save</v-btn>
@ -101,30 +111,28 @@
<template v-slot:default="props"> <template v-slot:default="props">
<v-row dense> <v-row dense>
<v-col v-for="item in props.items" <v-col v-for="item in props.items"
:key="item.name" :key="item.index"
cols="12" cols="12"
sm="6" sm="6"
md="4" md="4"
lg="3"> lg="3">
<v-hover <v-hover v-slot:default="{ hover }">
v-slot:default="{ hover }" <v-card @click.native="openLocation(item['location'])"
> :color="hover ? 'grey darken-3' : 'grey darken-4'"
<v-card :style="item.thumbnail ? 'background-size: cover; background-position: center; background-image: url(' + item.thumbnail +');' : '' "
@click.native="openLocation(item['Visit'])" :class="item.thumbnail ? (hover ? 'thumbnailItem thumbnailItemHover' : 'thumbnailItem') : '' "
:color="hover ? 'grey darken-3' : 'grey darken-4'" >
>
<!--<v-card-title class="headline">{{ item["Domain Name"] }}</v-card-title>-->
<div class="d-flex flex-no-wrap justify-space-between"> <div class="d-flex flex-no-wrap justify-space-between">
<div> <div>
<v-card-title class="text-h6 d-block text-truncate pa-2" v-text="item['Domain Name']" style="max-width: 400px;"></v-card-title> <v-card-title class="text-h6 d-block text-truncate pa-2" v-text="item['name']" style="max-width: 400px;"></v-card-title>
<v-card-subtitle class="pa-2 d-block text-truncate" style="max-width: 400px;" v-text="item.Owner"></v-card-subtitle> <v-card-subtitle class="pa-2 d-block text-truncate" style="max-width: 400px;" v-text="item.owner"></v-card-subtitle>
</div> </div>
<div style="text-align: right;"> <div style="text-align: right;">
<v-card-title align-right class="align-right" v-text="item['People']"></v-card-title> <v-card-title align-right class="align-right" v-text="item['userCount']"></v-card-title>
</div> </div>
</div> </div>
</v-card> </v-card>
</hover> </v-hover>
</v-col> </v-col>
</v-row> </v-row>
</template> </template>
@ -230,7 +238,7 @@
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="grey darken-3" class="mx-1" v-show="isHomeSet" value="animations" fab small @click="navigateHome()"> <v-btn v-bind="attrs" v-on="on" color="grey darken-3" class="mx-1" v-show="isHomeSet" value="animations" fab small @click="navigateHome()">
<v-icon color="purple">mdi-home</v-icon> <v-icon color="purple lighten-2">mdi-home</v-icon>
</v-btn> </v-btn>
</template> </template>
<span>Go Home</span> <span>Go Home</span>
@ -238,7 +246,7 @@
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="grey darken-3" class="mx-1" value="animations" fab small @click="navigateBack()"> <v-btn v-bind="attrs" v-on="on" color="grey darken-3" class="mx-1" value="animations" fab small @click="navigateBack()">
<v-icon color="purple">mdi-arrow-left-bold</v-icon> <v-icon color="purple lighten-2">mdi-arrow-left-bold</v-icon>
</v-btn> </v-btn>
</template> </template>
<span>Go Back</span> <span>Go Back</span>
@ -246,14 +254,14 @@
<v-tooltip bottom> <v-tooltip bottom>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on" color="grey darken-3" class="mx-1" value="animations" fab small @click="navigateForward()"> <v-btn v-bind="attrs" v-on="on" color="grey darken-3" class="mx-1" value="animations" fab small @click="navigateForward()">
<v-icon color="purple">mdi-arrow-right-bold</v-icon> <v-icon color="purple lighten-2">mdi-arrow-right-bold</v-icon>
</v-btn> </v-btn>
</template> </template>
<span>Go Forward</span> <span>Go Forward</span>
</v-tooltip> </v-tooltip>
<!--<v-btn value="animations" fab small> <!--<v-btn value="animations" fab small>
<v-icon color="purple">mdi-map-marker-plus</v-icon> <v-icon color="purple">mdi-map-marker-plus</v-icon>
</v-btn>--> </v-btn>-->
<add-location ref="addLocation" :permission="permission"></add-location> <add-location ref="addLocation" :permission="permission"></add-location>
</v-app-bar> </v-app-bar>
</div> </div>
@ -286,22 +294,76 @@
<script src="../libraries/vue/vue.min.js"></script> <script src="../libraries/vue/vue.min.js"></script>
<script src="../libraries/vue-router/vue-router.js"></script> <script src="../libraries/vue-router/vue-router.js"></script>
<script src="../libraries/vuetify/vuetify-v2.3.9.js"></script> <script src="../libraries/vuetify/vuetify-v2.3.9.js"></script>
<script src="../libraries/axios/axios.min.js"></script>
<script> <script>
var exploreComponent = null; var exploreComponent = null;
var locationData = null; var locationData = null;
var placesData = null;
function blendedData() {
var joinedData = [];
if (locationData != null) {
for (var i = 0; i < locationData.length; i++) {
joinedData.push({
"index": joinedData.length
, "location": locationData[i].Visit
, "name": locationData[i]['Domain Name']
, "owner": locationData[i].Owner
, "userCount": locationData[i].People
, "description": ""
, "thumbnail": ""
});
}
}
if (placesData != null) {
var activeThresholdTime = new Date();
activeThresholdTime.setMinutes(activeThresholdTime.getMinutes() - 15);
// while blending metaverse data ensure it is cleaned for active domains
for (var i = 0; i < placesData.length; i++) {
if (placesData[i].domain.active && placesData[i].visibility == "open" && new Date(placesData[i].last_activity_update) > activeThresholdTime) {
joinedData.push({
"index": joinedData.length
, "location": placesData[i].address
, "name": placesData[i].name
, "owner": placesData[i].managers[0]
, "userCount": placesData[i].current_attendance
, "description": placesData[i].description
, "thumbnail": placesData[i].thumbnail
});
}
}
}
return joinedData;
}
function getAddressListData(component) { function getAddressListData(component) {
exploreComponent = component; exploreComponent = component;
if (locationData != null) { // if json data not loaded fire emti event for it
exploreComponent.updateData(locationData); if (locationData == null) {
return; var readyEvent = {
"action": "requestAddressList",
};
EventBridge.emitWebEvent(JSON.stringify(readyEvent));
} }
var readyEvent = { // if metaverse data not loaded fire a request for it
"action": "requestAddressList", if (placesData == null) {
}; // TODO: fire off data get against the metaverse
EventBridge.emitWebEvent(JSON.stringify(readyEvent)); axios.get("https://metaverse.vircadia.com/live/api/v1/places")
.then((response) => {
placesData = response.data.data.places;
exploreComponent.updateData(blendedData());
})
.catch(function (error) {
console.log(error);
});
}
} }
var bookmarksComponent = null; var bookmarksComponent = null;
@ -346,8 +408,8 @@
page: 1, page: 1,
pageCount: 0, pageCount: 0,
itemsPerPage: 6, itemsPerPage: 6,
sortBy: 'People', sortBy: 'userCount',
items: [], items: [],
} }
}, },
template: document.getElementById("explore-template").innerHTML, template: document.getElementById("explore-template").innerHTML,
@ -544,7 +606,7 @@
if (messageData.action == "addressListv2") { if (messageData.action == "addressListv2") {
self.permission = messageData.permission; self.permission = messageData.permission;
locationData = messageData.myAddress; locationData = messageData.myAddress;
exploreComponent.updateData(locationData); exploreComponent.updateData(blendedData());
self.isHomeSet = messageData.isHomeSet; self.isHomeSet = messageData.isHomeSet;
} }
if (messageData.action == "bookmarksList") { if (messageData.action == "bookmarksList") {
@ -553,9 +615,9 @@
} }
if (messageData.action == "retrievePortInformationResponse") { if (messageData.action == "retrievePortInformationResponse") {
addLocationData = messageData.goToAddresses; addLocationData = messageData.goToAddresses;
for (let i = 0; i < addLocationData.length; i++) { for (let i = 0; i < addLocationData.length; i++) {
var metaverseProvider = addLocationData[i].split("/")[2].split(":")[0]; var metaverseProvider = addLocationData[i].split("/")[2].split(":")[0];
addLocationData[i] = "https://" + metaverseProvider + "/interim/d-goto/app/decentralizedGoToServerScript.js"; addLocationData[i] = "https://" + metaverseProvider + "/interim/d-goto/app/decentralizedGoToServerScript.js";
} }
addLocationComponent.updateData(addLocationData); addLocationComponent.updateData(addLocationData);
} }

3
scripts/communityScripts/libraries/axios/axios.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long