💄 Add Checkin Success Modal in experimental features (#1942)

Traewelling · Sep 29, 2023 · e4623f7 · e4623f7
1 parent a200858
commit e4623f7
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 9 deletions.
diff --git a/app/Dto/PointCalculation.php b/app/Dto/PointCalculation.php
@@ -11,14 +11,14 @@ class PointCalculation
     public readonly int         $basePoints;
     public readonly int         $distancePoints;
     public readonly PointReason $reason;
-    public readonly int         $factor;
+    public readonly float       $factor;
 
     public function __construct(
         int         $points,
         int         $basePoints,
         int         $distancePoints,
         PointReason $reason,
-        int         $factor,
+        float       $factor,
     ) {
         $this->points           = $points;
         $this->basePoints       = $basePoints;

diff --git a/app/Http/Controllers/Backend/BrouterController.php b/app/Http/Controllers/Backend/BrouterController.php
@@ -55,6 +55,7 @@ public static function getGeoJSONForRoute(
             Log::debug('[RefreshPolyline] Brouter response was not okay.', ['body' => $response->body()]);
             throw new InvalidArgumentException('Brouter response was not okay.');
         }
+        throw new InvalidArgumentException('Brouter response was not okay.');
 
         $geoJson = json_decode($response->body(), false, 512, JSON_THROW_ON_ERROR);
         //remove unnecessary data

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -13,6 +13,7 @@ import "awesomplete/awesomplete";
 import "leaflet/dist/leaflet.js";
 import "./api/api";
 import "./components/maps";
+import CheckinSuccessHelper from "../vue/components/CheckinSuccessHelper.vue";
 
 document.addEventListener("DOMContentLoaded", function () {
 
@@ -30,6 +31,11 @@ document.addEventListener("DOMContentLoaded", function () {
     app3.component('Stationautocomplete', StationAutocomplete);
     app3.mount('#station-board-new');
 
+    const app4 = createApp({});
+    app4.component('CheckinSuccessHelper', CheckinSuccessHelper);
+    app4.mount('#checkin-success-helper');
+
+
     window.notyf = new Notyf({
         duration: 5000,
         position: { x: "right", y: "top" },

diff --git a/resources/views/status.blade.php b/resources/views/status.blade.php
@@ -27,7 +27,12 @@
 @section('content')
     <div class="container">
         <div class="row justify-content-center">
-            <div class="col-md-8 col-lg-7">
+            <div class="col-md-8 col-lg-7" >
+                @if(auth()->user()->experimental ?? false)
+                    <div id="checkin-success-helper">
+                        <checkin-success-helper></checkin-success-helper>
+                    </div>
+                @endif
                 <h2 class="fs-5">{{ userTime($status->trainCheckin->departure,__('dateformat.with-weekday')) }}</h2>
                 @include('includes.status')
 

diff --git a/resources/vue/components/CheckinInterface.vue b/resources/vue/components/CheckinInterface.vue
@@ -1,5 +1,6 @@
 <script>
 import {DateTime} from "luxon";
+import {Notyf} from "notyf";
 
 export default {
     name: "CheckinInterface",
@@ -21,6 +22,8 @@ export default {
             visibility: 0,
             business: 0,
             loading: false,
+            notyf: new Notyf({position: {x: 'right', y: 'bottom'}}),
+            collision: false,
         };
     },
     methods: {
@@ -38,7 +41,7 @@ export default {
                 destination: this.selectedDestination.evaIdentifier,
                 departure: DateTime.fromISO(this.selectedTrain.plannedWhen).setZone("UTC").toISO(),
                 arrival: DateTime.fromISO(this.selectedDestination.arrivalPlanned).setZone("UTC").toISO(),
-                force: false,
+                force: this.collision,
                 eventId: null,
             };
             fetch('/api/v1/trains/checkin', {
@@ -48,9 +51,27 @@ export default {
                 },
                 body: JSON.stringify(data),
             }).then((response) => {
-                response.json().then((result) => {
-                    window.location = "/status/" + result.data.status.id;
-                });
+                this.loading = false;
+                if (response.ok) {
+                    response.json().then((result) => {
+                        localStorage.setItem("points", JSON.stringify(result.data.points));
+                        localStorage.setItem("alsoOnThisConnection", JSON.stringify(result.data.alsoOnThisConnection));
+                        window.location = "/status/" + result.data.status.id;
+                    });
+                }
+                if (response.status === 409) {
+                    response.json().then(() => {
+                        this.collision = true;
+                        this.notyf.error("Du bist bereits in einem Zug eingecheckt. Falls du den Checkin forcieren möchtest, drücke nochmal auf \"einchecken\".");
+                    });
+                }
+                if (response.status === 500) {
+                    this.notyf.error("Ein unbekannter Fehler ist aufgetreten. Bitte versuche es später erneut.");
+                }
+            }).catch((reason) => {
+                console.log(reason);
+                this.loading = false;
+                this.notyf.error(reason);
             });
         }
     },

diff --git a/resources/vue/components/CheckinSuccessHelper.vue b/resources/vue/components/CheckinSuccessHelper.vue
@@ -0,0 +1,60 @@
+<script>
+import FullScreenModal from "./FullScreenModal.vue";
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    name: "CheckinSuccessHelper",
+    components: {ModalComponent, FullScreenModal},
+    data() {
+        return {
+            points: {calculation: {}},
+            alsoOnThisConection: [],
+        };
+    },
+    methods: {
+        fetchData() {
+            this.points              = JSON.parse(localStorage.getItem("points"));
+            this.alsoOnThisConection = JSON.parse(localStorage.getItem("alsoOnThisConnection"));
+            localStorage.removeItem("points");
+            localStorage.removeItem("alsoOnThisConnection");
+            console.log(this.alsoOnThisConection[0]);
+            if (this.points && this.points.points) {
+                this.$refs.modal.show();
+            }
+        }
+    },
+    mounted() {
+        this.fetchData();
+    }
+}
+</script>
+
+<template>
+    <ModalComponent ref="modal" header-class="bg-success text-white" title="Erfolgreich eingecheckt!" :hide-footer="true">
+        <template #body>
+            <p>Für deinen Checkin erhältst du {{ points.points }} Punkte!</p>
+            <p v-if="points.calculation.reason === 1 || points.calculation.reason === 2" class="text-muted">
+                Du hast zu weit vor/nach deiner Fahrt eingecheckt. Ansonsten hättest du {{ points.points / points.calculation.factor }} Punkte bekommen.
+            </p>
+            <p v-if="points.calculation.reason === 3" class="text-danger">Da du deinen Checkin forciert hast, bekommst du keine Punkte.</p>
+
+            <template v-if="alsoOnThisConection.length > 0">
+                <h5 class="mt-5">In deiner Verbindung haben folgende Leute eingecheckt:</h5>
+                <div class="list-group">
+                    <a href="#" v-for="status in alsoOnThisConection" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+                        <div class="d-flex gap-2 w-100 justify-content-between">
+                            <div>
+                                <h6 class="mb-0 fw-bold opacity-75">{{status.username}}<small class="text-muted">@HerrLevin_</small></h6>
+                                <p class="mb-0">{{status.train.origin.name}} ➜ {{status.train.destination.name}}</p>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+            </template>
+        </template>
+    </ModalComponent>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/resources/vue/components/ModalComponent.vue b/resources/vue/components/ModalComponent.vue
@@ -11,6 +11,10 @@ export default {
             type: String,
             default: null
         },
+        headerClass: {
+            type: String,
+            default: null
+        },
         dialogClass: {
             type: String,
             default: null
@@ -44,8 +48,8 @@ export default {
          aria-hidden="true" ref="modalComponent">
         <div class="modal-dialog" :class="dialogClass">
             <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title text-dark" :class="{'flex-grow-1': !!this.$slots['header-extra']}">
+                <div class="modal-header text-dark" :class="headerClass">
+                    <h5 class="modal-title" :class="{'flex-grow-1': !!this.$slots['header-extra']}">
                         {{ title }}
                     </h5>
                     <slot name="header-extra"/>