Skip to content

Commit

Permalink
Merge pull request #154 from positivecrash/master
Browse files Browse the repository at this point in the history 
Fixes and new features for the UI
  • Loading branch information
@positivecrash
positivecrash authored Aug 20, 2024
2 parents aa83f6a + 4dcd3ca commit 3a2670d
Show file tree
Hide file tree
Showing 15 changed files with 291 additions and 258 deletions.
13 changes: 13 additions & 0 deletions src/assets/styles/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -554,6 +554,19 @@ section:not(:last-child) {
}
}

@keyframes fadeOut {
to {
opacity: 0;
visibility: hidden;
}
}

@keyframes rolldownLeft {
to {
transform: scaleX(0);
}
}

@keyframes blink {
0%{
opacity: .5;
Expand Down
244 changes: 171 additions & 73 deletions src/components/Map.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,18 @@
>

<button
class="popovercontrol"
class="popovercontrol popoovergeo"
v-if="geoavailable"
@click.prevent="resetgeo"
:area-label="$t('showlocation')"
:title="geoisloading ? $t('locationloading') : $t('showlocation')"
>
<font-awesome-icon icon="fa-solid fa-location-arrow" :fade="geoisloading" />

<div class="popoovergeo-tip" v-if="geomsg !== ''" :class="geomsgopened ? 'opened' : 'closed'">
{{geomsg}}
<font-awesome-icon icon="fa-solid fa-xmark" class="popoovergeo-tipclose" @click.stop="geomsg = ''" />
</div>
</button>
</Footer>
</template>
Expand All @@ -39,7 +44,12 @@ export default {
theme: window?.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark",
userposition: null,
geoavailable: false,
geoisloading: false
geoisloading: false,
geomsg: '',
geomsgopened: false,
geomsgopenedtime: 5000, // 5 seconds
geomsgopenedtimer: null,
map: null,
};
},
Expand Down Expand Up @@ -103,92 +113,124 @@ export default {
}
},
closegeotip() {
this.geomsg = '';
this.geomsgopened = false;
if (this.geomsgopenedtimer) {
clearTimeout(this.geomsgopenedtimer);
}
},
opengeotip(msg) {
this.closegeotip();
this.geomsg = msg;
this.geomsgopened = true;
this.geomsgopenedtimer = setTimeout(() => {
this.geomsg = '';
this.geomsgopened = false;
}, this.geomsgopenedtime);
},
getlocalmappos() {
console.log("Geolocation setting up default values");
// console.log("Geolocation setting up default values");
const lastsettings = localStorage.getItem("map-position") || JSON.stringify({"lat": config.MAP.position.lat, "lng": config.MAP.position.lng, "zoom": config.MAP.zoom });
const savelocally = true;
/* We don't need to save position loacally if there is set from config */
if(!localStorage.getItem("map-position")) {
savelocally = false;
}
this.store.setmapposition(
JSON.parse(lastsettings).lat,
JSON.parse(lastsettings).lng,
JSON.parse(lastsettings).zoom
JSON.parse(lastsettings).zoom,
savelocally
);
// if(localStorage.getItem("map-position")) {
// this.geomsg += "Geolocation is set from saved data";
// } else {
// this.geomsg += "Geolocation is set by default";
// }
},
setgeo() {
setgeo(forse = false) {
return new Promise((resolve, reject) => {
if ("geolocation" in navigator) {
this.geoisloading = true;
this.geoavailable = true;
if ("geolocation" in navigator) {
this.geoavailable = true;
if(localStorage.getItem("map-position") && !forse) {
this.getlocalmappos();
resolve("Geolocation is set from local data");
} else {
navigator.geolocation.getCurrentPosition(
(position) => {
/* setting for the app globally user's geo position and zoom 20 for better view */
this.userposition = [position.coords.latitude, position.coords.longitude];
this.store.setmapposition(this.userposition[0], this.userposition[1], 20);
resolve();
},
(e) => {
reject(`[ERROR ${e.code}]${e.message}`);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 1000
(position) => {
/* setting for the app globally user's geo position and zoom 20 for better view */
this.userposition = [position.coords.latitude, position.coords.longitude];
this.store.setmapposition(this.userposition[0], this.userposition[1], 20);
if (this.userposition && this.map) {
drawuser(this.userposition, this.zoom);
}
);
// navigator.permissions.query({ name: "geolocation" }).then((permission) => {
// console.log('perm', permission.state);
// if(permission.state !== 'denied') {
// this.geoavailable = true;
// navigator.geolocation.getCurrentPosition(
// (position) => {
// this.userposition = [position.coords.latitude, position.coords.longitude];
// this.store.setmapposition(this.userposition[0], this.userposition[1], 20);
// resolve();
// },
// (e) => {
// reject(e);
// },
// {
// enableHighAccuracy: false,
// timeout: 5000,
// maximumAge: 1000
// }
// );
// } else {
// this.geoavailable = false;
// reject("geolocation error: permission denied");
// }
// })
resolve('Geolocation is determined');
},
(e) => {
reject(`Geolocation is not established [code - ${e.code}]`);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 5 * 60 * 1000
}
);
}
// navigator.permissions.query({ name: "geolocation" }).then((result) => {
// console.log('permission', result.state);
// result.onchange( () => {
// console.log('permission changed', result.state);
// })
// });
} else {
this.geoavailable = false;
reject("geolocation error: geolocation no available");
reject("Geolocation is not available");
}
});
},
resetgeo() {
this.setgeo().then(() => {
this.closegeotip();
this.setgeo(true).then((m) => {
// console.log("Geolocation set succesfully");
this.relocatemap(this.lat, this.lng, this.zoom, "reload");
}).catch(e => {
console.log("Error in 'resetgeo': ", e)
this.geoisloading = false;
this.opengeotip(m);
}).catch((m) => {
// console.log("Error in 'resetgeo': ", e);
this.geoisloading = false;
this.opengeotip(m);
})
},
async loadMap() {
const map = init([this.lat, this.lng], this.zoom, this.theme);
this.geoisloading = false;
this.map = init([this.lat, this.lng], this.zoom, this.theme);
this.relocatemap(this.lat, this.lng, this.zoom, "reload");
if (this.userposition) {
drawuser(this.userposition, this.zoom);
}
map.on("zoomend", (e) => {
this.map.on("zoomend", (e) => {
this.relocatemap(
e.target.getCenter().lat.toFixed(4),
e.target.getCenter().lng.toFixed(4),
Expand All @@ -201,7 +243,7 @@ export default {
);
});
map.on("moveend", (e) => {
this.map.on("moveend", (e) => {
/* setTimeout for mobiles (whne swiping up app, it causes unpleasant map moving before closing app) */
setTimeout( () => {
this.relocatemap(
Expand All @@ -217,7 +259,7 @@ export default {
}, 50)
});
initMarkers(map, this.measuretype, (data) => {
initMarkers(this.map, this.measuretype, (data) => {
this.$emit("clickMarker", data);
});
Expand All @@ -234,15 +276,16 @@ export default {
removeMap();
},
watch: {
geoisloading(d) {
console.log('geoisloading changed', d)
geoisloading(v) {
console.log('geoisloading changed', v)
},
geomsg(v) {
console.log('geomsg changed', v)
}
},
async mounted() {
this.geoisloading = true;
/* + get user's system theme */
if (window.matchMedia) {
window
Expand All @@ -259,16 +302,13 @@ export default {
/* retrieve coordinates */
this.setgeo()
.then(async () => {
console.log("Geolocation set succesfully");
this.geoisloading = false;
.then(async (m) => {
this.opengeotip(m);
this.loadMap();
})
.catch(e => {
.catch((m) => {
/* Если нет возможности "geolocation", то проверяем локальное хранилище */
console.log("Geoposition not found: ", e);
this.getlocalmappos();
this.geoisloading = false;
this.opengeotip(m + ', setting up default position...');
this.loadMap();
});
/* - Operate with a map */
Expand Down Expand Up @@ -353,6 +393,10 @@ export default {
width: 40px;
height: 40px;
}
.popoovergeo-tipclose.svg-inline--fa path {
fill: var(--color-light) !important;
}
</style>

<style scoped>
Expand All @@ -370,4 +414,58 @@ export default {
.mapcontainer.inactive {
filter: grayscale(100%);
}
.popoovergeo {
position: relative;
}
.popoovergeo-tip {
--gettime: v-bind('geomsgopenedtime');
--openedtime: calc(var(--gettime)/1000 * 1s);
position: absolute;
padding: 5px 25px 5px 10px;
background-color: color-mix(in srgb, var(--color-dark) 70%, transparent);
color: var(--color-light);
backdrop-filter: blur(5px);
font-weight: bold;
border-radius: 2px;
bottom: calc(var(--app-inputheight) + 10px);
width: 220px;
right: -10px;
font-size: 0.9em;
}
/* .popoovergeo-tip.opened {
animation: fadeOut 0.3s linear var(--openedtime) forwards;
} */
.popoovergeo-tip:before {
content: "";
height: 2px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--color-light);
animation: rolldownLeft var(--openedtime) linear 0s forwards;
transform-origin: 0 50%;
}
.popoovergeo-tip:after {
content: "";
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid color-mix(in srgb, var(--color-dark) 70%, transparent);
position: absolute;
bottom: -10px;
right: 15px;
}
.popoovergeo-tipclose {
position: absolute;
top: 5px;
right: 5px;
}
</style>
2 changes: 1 addition & 1 deletion src/components/footer/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="mapcontrols">
<div style="display:none">{{bufer}}</div>
<!-- <div style="display:none">{{bufer}}</div> -->
<div class="flexline">

<div id="bookmarks" class="popover-bottom-left popover" popover>
Expand Down
Loading

0 comments on commit 3a2670d

Please sign in to comment.