💄✨ Add experimental ui of a JS only checkin-flow (#1922)

Traewelling · Sep 22, 2023 · 1bd9881 · 1bd9881
1 parent 6f2a62c
commit 1bd9881
Show file tree

Hide file tree

Showing 20 changed files with 1,039 additions and 166 deletions.
diff --git a/.idea/php.xml b/.idea/php.xml
diff --git a/.idea/trwl.iml b/.idea/trwl.iml
diff --git a/app/Http/Controllers/Frontend/SettingsController.php b/app/Http/Controllers/Frontend/SettingsController.php
@@ -46,13 +46,14 @@ public function renderMutedUsers(): Renderable {
 
     public function updateMainSettings(Request $request): RedirectResponse {
         $validated = $request->validate([
-                                            'username'    => [
+                                            'username'     => [
                                                 'required', 'string', 'max:25', 'regex:/^[a-zA-Z0-9_]*$/'
                                             ],
-                                            'name'        => ['required', 'string', 'max:50'],
-                                            'email'       => ['required', 'string', 'email:rfc,dns', 'max:255'],
-                                            'mapprovider' => ['required', new Enum(MapProvider::class)],
-                                            'timezone'    => ['required', Rule::in(DateTimeZone::listIdentifiers())]
+                                            'name'         => ['required', 'string', 'max:50'],
+                                            'email'        => ['required', 'string', 'email:rfc,dns', 'max:255'],
+                                            'mapprovider'  => ['required', new Enum(MapProvider::class)],
+                                            'timezone'     => ['required', Rule::in(DateTimeZone::listIdentifiers())],
+                                            'experimental' => ['required', 'boolean'],
                                         ]);
 
         if (auth()->user()->username !== $validated['username']) {

diff --git a/app/Models/User.php b/app/Models/User.php
@@ -36,6 +36,7 @@
  * @property boolean     private_profile
  * @property boolean     prevent_index
  * @property boolean     likes_enabled
+ * @property boolean     $experimental
  * @property MapProvider mapprovider
  * @property int         privacy_hide_days
  * @property string      language
@@ -50,7 +51,7 @@ class User extends Authenticatable implements MustVerifyEmail
     protected $fillable = [
         'username', 'name', 'avatar', 'email', 'email_verified_at', 'password', 'home_id', 'privacy_ack_at',
         'default_status_visibility', 'likes_enabled', 'private_profile', 'prevent_index', 'privacy_hide_days',
-        'language', 'last_login', 'mapprovider', 'timezone',
+        'language', 'last_login', 'mapprovider', 'timezone', 'experimental',
     ];
     protected $hidden   = [
         'password', 'remember_token', 'email', 'email_verified_at', 'privacy_ack_at',
@@ -67,6 +68,7 @@ class User extends Authenticatable implements MustVerifyEmail
         'home_id'                   => 'integer',
         'private_profile'           => 'boolean',
         'likes_enabled'             => 'boolean',
+        'experimental'              => 'boolean',
         'default_status_visibility' => StatusVisibility::class,
         'prevent_index'             => 'boolean',
         'privacy_hide_days'         => 'integer',

diff --git a/database/migrations/2023_09_22_194607_add_experimental_setting_to_users.php b/database/migrations/2023_09_22_194607_add_experimental_setting_to_users.php
@@ -0,0 +1,22 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->boolean('experimental')->default(false)->after('likes_enabled');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('experimental');
+        });
+    }
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
         "croppie": "^2.6.5",
         "leaflet": "^1.9.4",
         "Leaflet-MovingMaker": "^0.0.1",
+        "luxon": "^3.4.3",
         "mdb-ui-kit": "^6.4.1",
         "notyf": "^3.10.0",
         "vue": "^3.3.4"

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -5,6 +5,8 @@ import {Notyf} from 'notyf';
 import {createApp} from 'vue';
 import NotificationBell from "../vue/components/NotificationBell.vue";
 import ActiveJourneyMap from "../vue/components/ActiveJourneyMap.vue";
+import Stationboard from "../vue/components/Stationboard.vue";
+import StationAutocomplete from "../vue/components/StationAutocomplete.vue";
 
 require("./bootstrap");
 require("awesomplete/awesomplete");
@@ -24,6 +26,11 @@ document.addEventListener("DOMContentLoaded", function () {
     app2.component('ActiveJourneyMap', ActiveJourneyMap);
     app2.mount('#activeJourneys');
 
+    const app3 = createApp({});
+    app3.component('Stationboard', Stationboard);
+    app3.component('Stationautocomplete', StationAutocomplete);
+    app3.mount('#station-board-new');
+
     window.notyf = new Notyf({
         duration: 5000,
         position: { x: "right", y: "top" },

diff --git a/resources/lang/de.json b/resources/lang/de.json
@@ -383,6 +383,8 @@
     "settings.prevent-indexing": "Suchmaschinenindexierung verhindern",
     "settings.allow": "Erlauben",
     "settings.prevent": "Verbieten",
+    "settings.experimental": "Experimentelle Features",
+    "settings.experimental.description": "Die experimentellen Features sind noch nicht fertig und können Fehler enthalten. Sie sind nicht für den täglichen Gebrauch geeignet.",
     "settings.privacy.update.success": "Deine Privatsphäreneinstellungen wurden aktualisiert.",
     "settings.search-engines.description": "Wir setzen ein noindex-Tag auf deinem Profil um den Suchmaschinen mitzuteilen, dass dein Profil nicht indexiert werden darf. Wir haben keinen Einfluss darauf, ob die Suchmaschine diesen Wunsch berücksichtigt.",
     "settings.no-tokens": "Es haben aktuell keine externen Anwendungen Zugriff auf deinen Account.",

diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -362,6 +362,8 @@
     "settings.prevent-indexing": "Prevent search engine indexing",
     "settings.allow": "Allow",
     "settings.prevent": "Prevent",
+    "settings.experimental": "Experimental features",
+    "settings.experimental.description": "The experimental features are not yet ready and may contain bugs. This is not recommended for daily use.",
     "settings.privacy.update.success": "Your privacy settings have been updated.",
     "settings.search-engines.description": "We set a noindex tag on your profile to tell the search engines that your profile should not be indexed. We have no influence on whether the search engine takes this wish into account.",
     "settings.last-accessed": "Last accessed",

diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -64,7 +64,13 @@
                     </div>
                 @endif
 
-                @include('includes.station-autocomplete')
+                @if(auth()->user()->experimental ?? false)
+                    <div id="station-board-new">
+                        <Stationautocomplete :dashboard="true"></Stationautocomplete>
+                    </div>
+                @else
+                    @include('includes.station-autocomplete')
+                @endif
                 @if($future->count() >= 1)
                     <div class="accordion accordion-flush" id="accordionFutureCheckIns">
                         <div class="accordion-item">

diff --git a/resources/views/settings/profile.blade.php b/resources/views/settings/profile.blade.php
@@ -137,6 +137,28 @@ class="form-control"
                             </div>
                         </div>
 
+                        <div class="form-group row">
+                            <label for="experimental" class="col-md-4 col-form-label text-md-right">
+                                {{ __('settings.experimental') }}
+                                <i class="fas fa-info-circle" title="{{__('settings.experimental.description')}}"
+                                   data-mdb-toggle="tooltip"></i>
+                            </label>
+                            <div class="col-md-6">
+                                <select class="form-control" name="experimental" id="experimental">
+                                    <option value="1" @if(auth()->user()->experimental) selected @endif>
+                                        {{__('settings.allow')}}
+                                    </option>
+                                    <option value="0" @if(!auth()->user()->experimental) selected @endif>
+                                        {{__('settings.prevent')}}
+                                    </option>
+                                </select>
+
+                                @error('prevent_index')
+                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
+                                @enderror
+                            </div>
+                        </div>
+
 
                         <div class="form-group row mb-0">
                             <div class="col-md-6 offset-md-4">