kopia lustrzana https://github.com/FacilMap/facilmap
152 wiersze
6.1 KiB
Vue
152 wiersze
6.1 KiB
Vue
<script setup lang="ts">
|
|
import { getLayers } from "facilmap-leaflet";
|
|
import { Util } from "leaflet";
|
|
import { computed } from "vue";
|
|
import ModalDialog from "./ui/modal-dialog.vue";
|
|
import { injectContextRequired, requireMapContext } from "./facil-map-context-provider/facil-map-context-provider.vue";
|
|
import { T, useI18n } from "../utils/i18n";
|
|
|
|
const i18n = useI18n();
|
|
|
|
const context = injectContextRequired();
|
|
const mapContext = requireMapContext(context);
|
|
|
|
const emit = defineEmits<{
|
|
hidden: [];
|
|
}>();
|
|
|
|
const layers = computed(() => {
|
|
const { baseLayers, overlays } = getLayers(mapContext.value.components.map);
|
|
return [...Object.values(baseLayers), ...Object.values(overlays)].flatMap((layer) => {
|
|
const attributionHtml = layer.getAttribution?.();
|
|
if (attributionHtml) {
|
|
return [{
|
|
id: Util.stamp(layer),
|
|
name: layer.options.fmGetName?.() ?? layer.options.fmName,
|
|
attributionHtml
|
|
}];
|
|
} else {
|
|
return [];
|
|
}
|
|
});
|
|
});
|
|
|
|
const fmVersion = __FM_VERSION__;
|
|
</script>
|
|
|
|
<template>
|
|
<ModalDialog
|
|
:title="i18n.t('about-dialog.header', { version: fmVersion })"
|
|
class="fm-about"
|
|
size="lg"
|
|
@hidden="emit('hidden')"
|
|
>
|
|
<p>
|
|
<T k="about-dialog.license-text">
|
|
<template #facilmap>
|
|
<a href="https://github.com/facilmap/facilmap" target="_blank"><strong>{{i18n.t('about-dialog.license-text-facilmap')}}</strong></a>
|
|
</template>
|
|
<template #license>
|
|
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">{{i18n.t('about-dialog.license-text-license')}}</a>
|
|
</template>
|
|
</T>
|
|
</p>
|
|
<p>
|
|
<T k="about-dialog.issues-text">
|
|
<template #tracker>
|
|
<a href="https://github.com/FacilMap/facilmap/issues" target="_blank">{{i18n.t('about-dialog.issues-text-tracker')}}</a>
|
|
</template>
|
|
</T>
|
|
</p>
|
|
|
|
<p>
|
|
<T k="about-dialog.help-text">
|
|
<template #documentation>
|
|
<a href="https://docs.facilmap.org/users/" target="_blank">{{i18n.t('about-dialog.help-text-documentation')}}</a>
|
|
</template>
|
|
<template #discussions>
|
|
<a href="https://github.com/FacilMap/facilmap/discussions" target="_blank">{{i18n.t('about-dialog.help-text-discussions')}}</a>
|
|
</template>
|
|
<template #chat>
|
|
<a href="https://matrix.to/#/#facilmap:rankenste.in" target="_blank">{{i18n.t('about-dialog.help-text-chat')}}</a>
|
|
</template>
|
|
</T>
|
|
</p>
|
|
|
|
<p><a href="https://docs.facilmap.org/users/privacy/" target="_blank">{{i18n.t('about-dialog.privacy-information')}}</a></p>
|
|
<h4>{{i18n.t('about-dialog.map-data')}}</h4>
|
|
<dl class="row">
|
|
<template v-for="{ id, name, attributionHtml } in layers" :key="id">
|
|
<dt class="col-sm-3">{{name}}</dt>
|
|
<dd class="col-sm-9" v-html="attributionHtml"></dd>
|
|
</template>
|
|
|
|
<dt class="col-sm-3">{{i18n.t('about-dialog.map-data-search')}}</dt>
|
|
<dd class="col-sm-9"><a href="https://nominatim.openstreetmap.org/" target="_blank">Nominatim</a> / <a href="https://www.openstreetmap.org/copyright" target="_blank">{{i18n.t('about-dialog.attribution-osm-contributors')}}</a></dd>
|
|
|
|
<dt class="col-sm-3">{{i18n.t('about-dialog.map-data-pois')}}</dt>
|
|
<dd class="col-sm-9"><a href="https://overpass-api.de/" target="_blank">Overpass API</a> / <a href="https://www.openstreetmap.org/copyright" target="_blank">{{i18n.t('about-dialog.attribution-osm-contributors')}}</a></dd>
|
|
|
|
<dt class="col-sm-3">{{i18n.t('about-dialog.map-data-directions')}}</dt>
|
|
<dd class="col-sm-9"><a href="https://www.mapbox.com/api-documentation/#directions">Mapbox Directions API</a> / <a href="https://openrouteservice.org/">OpenRouteService</a> / <a href="https://www.openstreetmap.org/copyright" target="_blank">{{i18n.t('about-dialog.attribution-osm-contributors')}}</a></dd>
|
|
|
|
<dt class="col-sm-3">{{i18n.t('about-dialog.map-data-geoip')}}</dt>
|
|
<dd class="col-sm-9">
|
|
<T k="about-dialog.map-data-geoip-description">
|
|
<template #maxmind>
|
|
<a href="https://www.maxmind.com">https://www.maxmind.com</a>
|
|
</template>
|
|
</T>
|
|
</dd>
|
|
</dl>
|
|
<h4>{{i18n.t('about-dialog.programs-libraries')}}</h4>
|
|
<ul>
|
|
<li><a href="https://nodejs.org/" target="_blank">Node.js</a></li>
|
|
<li><a href="https://sequelize.org/" target="_blank">Sequelize</a></li>
|
|
<li><a href="https://socket.io/" target="_blank">socket.io</a></li>
|
|
<li><a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a></li>
|
|
<li><a href="https://vuejs.org/" target="_blank">Vue.js</a></li>
|
|
<li><a href="https://vitejs.dev/" target="_blank">Vite</a></li>
|
|
<li><a href="https://getbootstrap.com/" target="_blank">Bootstrap</a></li>
|
|
<li><a href="https://leafletjs.com/" target="_blank">Leaflet</a></li>
|
|
<li><a href="http://project-osrm.org/" target="_blank">OSRM</a></li>
|
|
<li><a href="https://openrouteservice.org/" target="_blank">OpenRouteService</a></li>
|
|
<li><a href="https://nominatim.openstreetmap.org/" target="_blank">Nominatim</a></li>
|
|
<li><a href="https://github.com/joewalnes/filtrex" target="_blank">Filtrex</a></li>
|
|
<li><a href="https://github.com/chjj/marked" target="_blank">Marked</a></li>
|
|
<li><a href="https://github.com/cure53/DOMPurify" target="_blank">DOMPurify</a></li>
|
|
<li><a href="https://expressjs.com/" target="_blank">Express</a></li>
|
|
<li><a href="https://vuepress.vuejs.org/" target="_blank">Vuepress</a></li>
|
|
<li><a href="https://www.i18next.com/" target="_blank">I18next</a></li>
|
|
</ul>
|
|
<h4>{{i18n.t('about-dialog.icons')}}</h4>
|
|
<ul>
|
|
<li><a href="https://github.com/twain47/Open-SVG-Map-Icons/" target="_blank">Open SVG Map Icons</a></li>
|
|
<li><a href="https://glyphicons.com/" target="_blank">Glyphicons</a></li>
|
|
<li><a href="https://zavoloklom.github.io/material-design-iconic-font/index.html" target="_blank">Material Design Iconic Font</a></li>
|
|
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
|
|
</ul>
|
|
</ModalDialog>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.fm-about {
|
|
ul {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, 180px);
|
|
gap: 5px;
|
|
|
|
li {
|
|
border: 1px solid rgba(0,0,0,.125);
|
|
display: flex;
|
|
|
|
a {
|
|
flex-grow: 1;
|
|
padding: 5px 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |