mirror of https://github.com/lissy93/dashy
119 lines
3.4 KiB
Vue
119 lines
3.4 KiB
Vue
<template>
|
|
<div class="ip-info-wrapper">
|
|
<p class="ip-address">{{ ipAddr }}</p>
|
|
<div class="region-wrapper">
|
|
<img class="flag-image" :src="flagImg" alt="Flag" />
|
|
<div class="info-text">
|
|
<p class="isp-name">{{ ispName }}</p>
|
|
<a class="ip-location" :href="mapsUrl" title="🗺️ Open in Maps">
|
|
{{ location }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
|
import { widgetApiEndpoints } from '@/utils/defaults';
|
|
import { getCountryFlag, getMapUrl } from '@/utils/MiscHelpers';
|
|
|
|
export default {
|
|
mixins: [WidgetMixin],
|
|
computed: {
|
|
endpoint() {
|
|
if (this.provider === 'ipgeolocation') {
|
|
return `${widgetApiEndpoints.publicIp2}?apiKey=${this.apiKey}`;
|
|
} else if (this.provider === 'ipapi') {
|
|
return widgetApiEndpoints.publicIp3;
|
|
}
|
|
return widgetApiEndpoints.publicIp;
|
|
},
|
|
apiKey() {
|
|
if (this.provider === 'ipgeolocation' && !this.options.apiKey) this.error('Missing API Key');
|
|
return this.options.apiKey;
|
|
},
|
|
provider() {
|
|
// Can be either `ip-api`, `ipapi.co` or `ipgeolocation`
|
|
return this.parseAsEnvVar(this.options.provider) || 'ipapi.co';
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
ipAddr: null,
|
|
location: null,
|
|
ispName: null,
|
|
flagImg: null,
|
|
mapsUrl: null,
|
|
};
|
|
},
|
|
methods: {
|
|
/* Make GET request to CoinGecko API endpoint */
|
|
fetchData() {
|
|
this.makeRequest(this.endpoint).then(this.processData);
|
|
},
|
|
/* Assign data variables to the returned data */
|
|
processData(ipInfo) {
|
|
if (this.provider === 'ipapi.co') {
|
|
this.ipAddr = ipInfo.ip;
|
|
this.ispName = ipInfo.org;
|
|
this.location = `${ipInfo.city}, ${ipInfo.region}`;
|
|
this.flagImg = getCountryFlag(ipInfo.country_code);
|
|
this.mapsUrl = getMapUrl({ lat: ipInfo.latitude, lon: ipInfo.longitude });
|
|
} else if (this.provider === 'ipgeolocation') {
|
|
this.ipAddr = ipInfo.ip;
|
|
this.ispName = ipInfo.organization || ipInfo.isp;
|
|
this.location = `${ipInfo.city}, ${ipInfo.country_name}`;
|
|
this.flagImg = ipInfo.country_flag;
|
|
this.mapsUrl = getMapUrl({ lat: ipInfo.latitude, lon: ipInfo.longitude });
|
|
} else if (this.provider === 'ip-api') {
|
|
this.ipAddr = ipInfo.query;
|
|
this.ispName = ipInfo.isp;
|
|
this.location = `${ipInfo.city}, ${ipInfo.regionName}`;
|
|
this.flagImg = getCountryFlag(ipInfo.countryCode);
|
|
this.mapsUrl = getMapUrl({ lat: ipInfo.lat, lon: ipInfo.lon });
|
|
} else {
|
|
this.error('Unknown API provider fo IP address');
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.ip-info-wrapper {
|
|
cursor: default;
|
|
p.ip-address {
|
|
font-size: 1.6rem;
|
|
margin: 0.5rem auto;
|
|
color: var(--widget-text-color);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
.region-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
img.flag-image {
|
|
width: 2rem;
|
|
border-radius: var(--curve-factor-small);
|
|
margin: 0.25rem 0.5rem 0 0;
|
|
}
|
|
a.ip-location {
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
color: var(--widget-text-color);
|
|
opacity: var(--dimming-factor);
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
p.isp-name {
|
|
font-size: 1rem;
|
|
margin: 0.25rem 0 0 0;
|
|
color: var(--widget-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|