Ask for confirmation for nodes outside of community bounds.

2022-09-01 14:38:41 +02:00 · 2022-09-01 14:38:41 +02:00 · 4c6556de3f
parent 9387df8dd3
commit 4c6556de3f
6 changed files with 222 additions and 14 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@ -19,6 +19,7 @@
  },
  "dependencies": {
    "fork-awesome": "^1.2.0",
+    "geolib": "^3.3.3",
    "leaflet": "^1.8.0",
    "pinia": "^2.0.21",
    "sparkson": "^1.3.6",
--- a/frontend/src/components/FloatingIcon.vue
+++ b/frontend/src/components/FloatingIcon.vue
@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ComponentVariant } from "@/types";
+
+interface Props {
+    icon: string;
+    variant: ComponentVariant;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <span :class="['floating-icon', props.variant]">
+        <i :class="['fa', `fa-${props.icon}`]" aria-hidden="true" />
+    </span>
+</template>
+
+<style scoped lang="scss">
+@import "../scss/variables";
+
+.floating-icon {
+    display: block;
+    float: left;
+    margin: 0 0.5em 0.25em 0;
+
+    i {
+        font-size: 3em;
+    }
+}
+
+@each $variant, $color in $variant-colors {
+    .floating-icon.#{$variant} {
+        color: $color;
+    }
+}
+</style>
--- a/frontend/src/components/NodeMap.vue
+++ b/frontend/src/components/NodeMap.vue
@ -133,6 +133,14 @@ function centerOnCoordinates() {
 function renderMap() {
    const { layers, defaultLayers } = getLayers();
    createMap(defaultLayers, layers);
+    if (
+        map &&
+        configStore.getConfig.otherCommunityInfo.showBorderForDebugging
+    ) {
+        new L.Polygon(
+            configStore.getConfig.otherCommunityInfo.localCommunityPolygon
+        ).addTo(map);
+    }
    centerOnCoordinates();
    updateMarker();
 }
--- a/frontend/src/components/nodes/NodeCreateForm.vue
+++ b/frontend/src/components/nodes/NodeCreateForm.vue
@ -19,6 +19,7 @@ import {
    ComponentVariant,
    hasOwnProperty,
 } from "@/types";
+import FloatingIcon from "@/components/FloatingIcon.vue";
 import ErrorCard from "@/components/ErrorCard.vue";
 import ButtonGroup from "@/components/form/ButtonGroup.vue";
 import ValidationForm from "@/components/form/ValidationForm.vue";
@ -27,8 +28,12 @@ import { route, RouteName } from "@/router";
 import RouteButton from "@/components/form/RouteButton.vue";
 import { ApiError } from "@/utils/Api";
 import NodeCoordinatesInput from "@/components/nodes/NodeCoordinatesInput.vue";
+import OutsideOfCommunityConfirmationForm from "@/components/nodes/OutsideOfCommunityConfirmationForm.vue";
 import CheckboxInput from "@/components/form/CheckboxInput.vue";
 import InfoCard from "@/components/InfoCard.vue";
+import { isPointInPolygon } from "geolib";
+import { parseToFloat } from "@/utils/Numbers";
+import { forConstraint } from "../../shared/validation/validator";

 const configStore = useConfigStore();
 const nodeStore = useNodeStore();
@ -63,6 +68,9 @@ const nicknameModel = ref("" as Nickname);
 const emailModel = ref("" as EmailAddress);
 const monitoringModel = ref(false);

+const showOutsideOfCommunityForm = ref(false);
+const confirmedOutsideOfCommunity = ref(false);
+
 onMounted(() => {
    if (props.hostname) {
        hostnameModel.value = props.hostname;
@ -75,6 +83,30 @@ onMounted(() => {
    }
 });

+function isOutsideCommunity(): boolean {
+    if (!forConstraint(CONSTRAINTS.node.coords, false)(coordsModel.value)) {
+        return false;
+    }
+    const [lat, lng] = coordsModel.value.split(" ").map(parseToFloat);
+
+    return !isPointInPolygon(
+        { lat, lng },
+        configStore.getConfig.otherCommunityInfo.localCommunityPolygon
+    );
+}
+
+async function onConfirmOutsideOfCommunity() {
+    showOutsideOfCommunityForm.value = false;
+    confirmedOutsideOfCommunity.value = true;
+
+    await onSubmit();
+}
+
+async function onCancelOutsideOfCommunity() {
+    showOutsideOfCommunityForm.value = false;
+    window.scrollTo(0, 0);
+}
+
 async function onSubmit() {
    generalError.value = false;
    conflictErrorMessage.value = undefined;
@ -82,6 +114,18 @@ async function onSubmit() {
    // Make sure to re-render error message to trigger scrolling into view.
    await nextTick();

+    if (
+        configStore.getConfig.otherCommunityInfo.showInfo &&
+        isOutsideCommunity() &&
+        !confirmedOutsideOfCommunity.value
+    ) {
+        showOutsideOfCommunityForm.value = true;
+    } else {
+        await createNode();
+    }
+}
+
+async function createNode(): Promise<void> {
    try {
        const node = await nodeStore.create({
            hostname: hostnameModel.value,
@ -115,7 +159,17 @@ async function onSubmit() {
 </script>

 <template>
-    <ValidationForm novalidate="" ref="form" @submit="onSubmit">
+    <OutsideOfCommunityConfirmationForm
+        v-if="showOutsideOfCommunityForm"
+        @confirm="onConfirmOutsideOfCommunity"
+        @cancel="onCancelOutsideOfCommunity"
+    />
+    <ValidationForm
+        v-if="!showOutsideOfCommunityForm"
+        novalidate=""
+        ref="form"
+        @submit="onSubmit"
+    >
        <h2>Neuen Knoten anmelden</h2>

        <div>
@ -216,7 +270,10 @@ async function onSubmit() {
            <fieldset v-if="configStore.getConfig.monitoring.enabled">
                <h3>Möchtest Du automatisiert Status-E-Mails bekommen?</h3>

-                <i class="monitoring-icon fa fa-heartbeat" aria-hidden="true" />
+                <FloatingIcon
+                    icon="heartbeat"
+                    :variant="ComponentVariant.PRIMARY"
+                />

                <p class="help-block">
                    Du kannst Dich automatisiert benachrichtigen lassen, sobald
@ -266,8 +323,6 @@ async function onSubmit() {
                </InfoCard>
            </fieldset>

-            <h1>TODO: Check community bounds</h1>
-
            <ButtonGroup
                :align="ComponentAlignment.RIGHT"
                :button-size="ButtonSize.SMALL"
@ -294,13 +349,4 @@ async function onSubmit() {
    </ValidationForm>
 </template>

-<style lang="scss" scoped>
-@import "../../scss/variables";
-
-.monitoring-icon {
-    float: left;
-    margin: 0 0.25em 0.125em 0;
-    font-size: 3em;
-    color: $variant-color-primary;
-}
-</style>
+<style lang="scss" scoped></style>
--- a/frontend/src/components/nodes/OutsideOfCommunityConfirmationForm.vue
+++ b/frontend/src/components/nodes/OutsideOfCommunityConfirmationForm.vue
@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
+import ButtonGroup from "@/components/form/ButtonGroup.vue";
+import { ButtonSize, ComponentAlignment, ComponentVariant } from "@/types";
+import ActionButton from "@/components/form/ActionButton.vue";
+import ValidationForm from "@/components/form/ValidationForm.vue";
+import FloatingIcon from "@/components/FloatingIcon.vue";
+import { onMounted } from "vue";
+
+const configStore = useConfigStore();
+
+const emit = defineEmits<{
+    (e: "cancel"): void;
+    (e: "confirm"): void;
+}>();
+
+onMounted(() => {
+    window.scrollTo(0, 0);
+});
+
+function onCancel() {
+    emit("cancel");
+}
+
+function onSubmit() {
+    emit("confirm");
+}
+</script>
+
+<template>
+    <ValidationForm class="outside-of-community-form" @submit="onSubmit">
+        <h2>
+            Dein Router steht außerhalb des
+            {{ configStore.getConfig.community.name }} Gebiets
+        </h2>
+
+        <p>
+            <strong
+                >Erst mal großartig, dass du Freifunk machen möchtest!</strong
+            >
+        </p>
+
+        <FloatingIcon icon="community" :variant="ComponentVariant.SECONDARY" />
+
+        <p>
+            Freifunk steht u.a. für Denzentralität. Deshalb wäre es klasse wenn
+            Du Dich einer Community in Deiner Nähe anschließt oder vielleicht
+            sogar
+            <a
+                href="https://freifunk.net/wie-mache-ich-mit/lokale-gruppe-gruenden/"
+                target="_blank"
+                >Deine eigene gründest</a
+            >. Da aller Anfang schwer ist, macht es für eben diesen vielleicht
+            Sinn sich erst mal einer
+            <a
+                href="https://freifunk.net/wie-mache-ich-mit/community-finden/"
+                target="_blank"
+                >nahegelegen Gruppe</a
+            >
+            anzuschließen. Auch wir von
+            {{ configStore.getConfig.community.name }} stehen Dir natürlich
+            gerne mit Rat und Tat zur Seite und mit den existierenden
+            Hilfsmitteln ist die technische Hürde auch nicht mehr ganz so
+            gigantisch.
+        </p>
+
+        <p>
+            Es gibt auch technische Gründe, die gegen eine Erweiterung über die
+            Grenzen von
+            {{ configStore.getConfig.community.name }} hinaus sprechen. Das
+            Problem mit Mesh-Netzen heute ist, dass sie nicht besonders gut
+            skalieren und mit jedem weiteren Router die Leistung nach unten
+            geht.
+        </p>
+
+        <p>
+            Im Moment kommen ständig neue Freifunk-Communities dazu. Welche
+            Communities es schon gibt, siehts Du
+            <a
+                href="https://freifunk.net/wie-mache-ich-mit/community-finden/"
+                target="_blank"
+                >in dieser Übersicht</a
+            >.
+        </p>
+
+        <ButtonGroup
+            :align="ComponentAlignment.CENTER"
+            :button-size="ButtonSize.MEDIUM"
+        >
+            <ActionButton
+                type="reset"
+                icon="times"
+                :variant="ComponentVariant.SECONDARY"
+                :size="ButtonSize.SMALL"
+                @click="onCancel"
+            >
+                Abbrechen
+            </ActionButton>
+
+            <ActionButton
+                type="submit"
+                icon="dot-circle-o"
+                :variant="ComponentVariant.INFO"
+                :size="ButtonSize.SMALL"
+            >
+                Knoten dennoch anmelden
+            </ActionButton>
+        </ButtonGroup>
+    </ValidationForm>
+</template>
+
+<style lang="scss"></style>
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -1291,6 +1291,11 @@ functional-red-black-tree@^1.0.1:
  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=

+geolib@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/geolib/-/geolib-3.3.3.tgz#17f5a0dcdc0b051bd631b66f7131d2c14c54a15b"
+  integrity sha512-YO704pzdB/8QQekQuDmFD5uv5RAwAf4rOUPdcMhdEOz+HoPWD0sC7Qqdwb+LAvwIjXVRawx0QgZlocKYh8PFOQ==
+
 get-func-name@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"