✨ Vue: MetaTags and title now change according to the accessed site (#…

…476) * Update dependencies * Update dependencies * fixed vue * install * fixed the css import to a scss import and added filetypes *.js.LICENSE.txt and *.css.map to .gitignore * Update vue.js * removed useless stuff from webpack.mix.js * Added vue-based meta tags on app.vue * metadata added to status and profile * metadata added to status and profile and leaderboards * Meta comment * added noindex functionality * fixed title in single status * fixes * codacy Co-authored-by: Kristian Stöckel <[email protected]>
Traewelling · Jul 25, 2021 · c3c6499 · c3c6499
1 parent 9d834ae
commit c3c6499
Show file tree

Hide file tree

Showing 24 changed files with 375 additions and 186 deletions.
diff --git a/README.md b/README.md
@@ -25,17 +25,18 @@
 ## Set up an instance
 
 To set up a Träwelling instance you'll need:
+
 * [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 * [MariaDB](https://mariadb.org/download) (SQLite is used for running tests)
 * A local instance of [db-rest v5](https://github.com/derhuerst/db-rest/tree/5)
 * [Composer](https://getcomposer.org/download/)
 * PHP 8.0 and the following extensions:
-  * gd
-  * sodium
-  * exif
-  * pdo_mysql
-  * pdo_sqlite
-	
+    * gd
+    * sodium
+    * exif
+    * pdo_mysql
+    * pdo_sqlite
+
 After setting up these, you can clone the repository and install the project's dependencies:
 
 ```sh
@@ -65,8 +66,8 @@ php artisan passport:install
 
 Last, but not least, you can run `npm run dev` to build the frontend and watch for changes in the `resources/` folder.
 
-Use your webserver of choice or the in php included dev server (`php artisan serve`) to boot the application. You should see the Träwelling
-homepage at http://localhost:8000.
+Use your webserver of choice or the in php included dev server (`php artisan serve`) to boot the application. You should
+see the Träwelling homepage at http://localhost:8000.
 
 ## Contributing
 

diff --git a/app/Http/Resources/StatusResource.php b/app/Http/Resources/StatusResource.php
@@ -15,17 +15,18 @@ class StatusResource extends JsonResource
      */
     public function toArray($request): array {
         return [
-            "id"         => (int) $this->id,
-            "body"       => (string) $this->body,
-            "type"       => (string) $this->type,
-            "createdAt"  => (string) $this->created_at,
-            "user"       => (int) $this->user->id,
-            "username"   => (string) $this->user->username,
-            "business"   => (int) $this->business,
-            "visibility" => (int) $this->visibility,
-            "likes"      => (int) $this->likes->count(),
-            "liked"      => (bool) $this->favorited,
-            "train"      => [
+            "id"           => (int) $this->id,
+            "body"         => (string) $this->body,
+            "type"         => (string) $this->type,
+            "createdAt"    => (string) $this->created_at,
+            "user"         => (int) $this->user->id,
+            "username"     => (string) $this->user->username,
+            "preventIndex" => (bool) $this->user->prevent_index,
+            "business"     => (int) $this->business,
+            "visibility"   => (int) $this->visibility,
+            "likes"        => (int) $this->likes->count(),
+            "liked"        => (bool) $this->favorited,
+            "train"        => [
                 "trip"        => (int) $this->trainCheckin->HafasTrip->id,
                 "category"    => (string) $this->trainCheckin->HafasTrip->category,
                 "number"      => (string) $this->trainCheckin->HafasTrip->number,
@@ -39,7 +40,7 @@ public function toArray($request): array {
                 "destination" => new StopoverResource($this->trainCheckin->destination_stopover)
             ],
             //ToDo: Custom Resource for event
-            "event"      => empty($this->event) ? null : $this->event
+            "event"        => empty($this->event) ? null : $this->event
         ];
     }
 }
diff --git a/app/Http/Resources/StopoverResource.php b/app/Http/Resources/StopoverResource.php
@@ -17,6 +17,7 @@ public function toArray($request): array {
         return [
             "id"                       => (int) $this->train_station_id,
             "name"                     => $this->trainStation->name,
+            "rilIdentifier"            => $this->trainStation->rilIdentifier ?? null,
             "arrival"                  => $this->arrival,
             "arrivalPlanned"           => $this->arrival_planned,
             "arrivalReal"              => $this->arrival_real,

diff --git a/app/Http/Resources/UserResource.php b/app/Http/Resources/UserResource.php
@@ -25,7 +25,8 @@ public function toArray($request): array {
             'twitterUrl'        => $this->twitterUrl ?? null,
             'mastodonUrl'       => $this->mastodonUrl ?? null,
             'privateProfile'    => (bool) $this->private_profile,
-            'userInvisibleToMe' => (bool) $this->userInvisibleToMe
+            'userInvisibleToMe' => (bool) $this->userInvisibleToMe,
+            'preventIndex'      => (bool) $this->prevent_index,
         ];
     }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,22 +26,23 @@
         "vue-template-compiler": "^2.6.12"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.2",
-        "@websanova/vue-auth": "^4.1.2",
-        "admin-lte": "^3.0.5",
-        "awesomplete": "^1.1.5",
-        "bootstrap-cookie-alert": "^1.2.1",
-        "chart.js": "^2.9.4",
-        "croppie": "^2.6.5",
-        "font-awesome": "^4.7.0",
-        "lang.js": "^1.1.14",
-        "leaflet": "^1.7.1",
-        "mdb-ui-kit": "^3.4.0",
-        "moment": "^2.29.1",
-        "momentjs": "^2.0.0",
-        "vue-axios": "^3.2.4",
-        "vue-i18n": "^8.24.4",
-        "vue-localstorage": "^0.6.2",
-        "vue-router": "^3.5.1"
+      "@fortawesome/fontawesome-free": "^5.15.2",
+      "@websanova/vue-auth": "^4.1.2",
+      "admin-lte": "^3.0.5",
+      "awesomplete": "^1.1.5",
+      "bootstrap-cookie-alert": "^1.2.1",
+      "chart.js": "^2.9.4",
+      "croppie": "^2.6.5",
+      "font-awesome": "^4.7.0",
+      "lang.js": "^1.1.14",
+      "leaflet": "^1.7.1",
+      "mdb-ui-kit": "^3.4.0",
+      "moment": "^2.29.1",
+      "momentjs": "^2.0.0",
+      "vue-axios": "^3.2.4",
+      "vue-i18n": "^8.24.4",
+      "vue-localstorage": "^0.6.2",
+      "vue-meta": "^2.4.0",
+      "vue-router": "^3.5.1"
     }
 }
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,10 +1,10 @@
 {
-  "/js/app.js": "/js/app.js?id=873068844483db334a96",
-  "/js/stats.js": "/js/stats.js?id=a283d9f470f87191f0a4",
-  "/js/admin.js": "/js/admin.js?id=85cc565cce84bf48d125",
-  "/js/vue.js": "/js/vue.js?id=5be8c56f457ea4e93bff",
-  "/css/vue.css": "/css/vue.css?id=08121888397de7c72404",
-  "/css/app.css": "/css/app.css?id=64d37218f5603a068e3a",
-  "/css/welcome.css": "/css/welcome.css?id=2ae9a4575e032f1d920d",
-  "/css/admin.css": "/css/admin.css?id=4630aa46d4953b7c6858"
+    "/js/app.js": "/js/app.js",
+    "/js/stats.js": "/js/stats.js",
+    "/js/admin.js": "/js/admin.js",
+    "/js/vue.js": "/js/vue.js",
+    "/css/vue.css": "/css/vue.css",
+    "/css/app.css": "/css/app.css",
+    "/css/welcome.css": "/css/welcome.css",
+    "/css/admin.css": "/css/admin.css"
 }
diff --git a/resources/components/Dashboard.vue b/resources/components/Dashboard.vue
@@ -44,6 +44,11 @@ export default {
       moment: moment
     };
   },
+  metaInfo() {
+    return {
+      title: this.i18n.get("_.menu.dashboard")
+    };
+  },
   components: {
     StationForm,
     Status

diff --git a/resources/components/Login.vue b/resources/components/Login.vue
@@ -36,15 +36,15 @@ export default {
       // get the redirect object
       var redirect = this.$auth.redirect();
       this.$auth.login({
-        data: {
-          email: this.email,
-          password: this.password
-        },
-        redirect: {name: "dashboard"},
-        staySignedIn: true,
-        fetchUser: true,
+          data: {
+              email: this.email,
+              password: this.password
+          },
+          redirect: {name: "dashboard"},
+          staySignedIn: true,
+          fetchUser: true,
       }).then(() => {
-        this.$auth.fetch();
+          this.$auth.fetch();
       });
     }
   }

diff --git a/resources/components/ModalConfirm.vue b/resources/components/ModalConfirm.vue
@@ -2,21 +2,21 @@
   <div class="modal fade" tabindex="-1" role="dialog" ref="deleteModal">
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">
-        <div class="modal-header">
-          <h4 class="modal-title">{{ this.$props.titleText }}</h4>
-          <button type="button" class="close" v-on:click="abort" aria-label="Close">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body" v-if="bodyText">
-          <p v-html="this.$props.bodyText"></p>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-light" v-on:click="abort">{{ this.$props.abortText }}</button>
-          <button type="button" class="btn" :class="confirmButtonColor" v-on:click="confirm">
-            {{ this.$props.confirmText }}
-          </button>
-        </div>
+          <div class="modal-header">
+              <h4 class="modal-title">{{ this.$props.titleText }}</h4>
+              <button type="button" class="close" v-on:click="abort" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+              </button>
+          </div>
+          <div v-if="bodyText" class="modal-body">
+              <p v-html="this.$props.bodyText"></p>
+          </div>
+          <div class="modal-footer">
+              <button type="button" class="btn btn-light" v-on:click="abort">{{ this.$props.abortText }}</button>
+              <button type="button" class="btn" :class="confirmButtonColor" v-on:click="confirm">
+                  {{ this.$props.confirmText }}
+              </button>
+          </div>
       </div>
     </div>
   </div>
@@ -36,11 +36,11 @@ export default {
     this.modal = new Modal(this.$refs.deleteModal);
   },
   props: {
-    titleText: null,
-    abortText: null,
-    confirmText: null,
-    confirmButtonColor: null,
-    bodyText: null
+      titleText: null,
+      abortText: null,
+      confirmText: null,
+      confirmButtonColor: null,
+      bodyText: null
   },
   methods: {
     show() {

diff --git a/resources/components/StationForm.vue b/resources/components/StationForm.vue
@@ -29,28 +29,28 @@
               </div>
             </div>
           </div>
-          <div id="last-stations" class="list-group collapse">
-            <router-link v-if="$auth.user().home"
-                         :to="{name: 'trains.stationboard', query: {station: $auth.user().home.name }}"
-                         class="list-group-item list-group-item-action">
-              <i aria-hidden="true" class="fa fa-home mr-2"></i> {{ $auth.user().home.name }}
-            </router-link>
-            <span v-else class="list-group-item title list-group-item-action disabled">
+            <div id="last-stations" class="list-group collapse">
+                <router-link v-if="$auth.user().home"
+                             :to="{name: 'trains.stationboard', query: {station: $auth.user().home.name }}"
+                             class="list-group-item list-group-item-action">
+                    <i aria-hidden="true" class="fa fa-home mr-2"></i> {{ $auth.user().home.name }}
+                </router-link>
+                <span v-else class="list-group-item title list-group-item-action disabled">
               <i aria-hidden="true" class="fa fa-home mr-2"></i> {{ i18n.get("_.user.home-not-set") }}
             </span>
-            <!--                @if($latest->count())-->
-            <span class="list-group-item title list-group-item-action disabled">
+                <!--                @if($latest->count())-->
+                <span class="list-group-item title list-group-item-action disabled">
               {{ i18n.get("_.stationboard.last-stations") }}
             </span>
-            <!--                @foreach($latest as $station)-->
-            <!--                <a href="route('trains.stationboard', ['provider' => 'train', 'station' => $station->name ])"-->
-            <!--                   title="{{ $station->name }}" id="home-button"-->
-            <!--                   class="list-group-item list-group-item-action">-->
-            <!--                  {{ $station->name }}-->
-            <!--                </a>-->
-            <!--                @endforeach-->
-            <!--                @endif-->
-          </div>
+                <!--                @foreach($latest as $station)-->
+                <!--                <a href="route('trains.stationboard', ['provider' => 'train', 'station' => $station->name ])"-->
+                <!--                   title="{{ $station->name }}" id="home-button"-->
+                <!--                   class="list-group-item list-group-item-action">-->
+                <!--                  {{ $station->name }}-->
+                <!--                </a>-->
+                <!--                @endforeach-->
+                <!--                @endif-->
+            </div>
           <button class="btn btn-outline-primary float-end" type="submit" v-on:click.prevent="submitStation('')">
             {{ i18n.get('_.stationboard.submit-search') }}
           </button>

diff --git a/resources/js/APImodels.js b/resources/js/APImodels.js
@@ -22,7 +22,9 @@ export let EventModel = {
 };
 
 export let Stopover = {
+    id: 0,
     name: "",
+    rilIdentifier: null,
     trainStationId: 0,
     arrival: "",
     arrivalPlanned: "",
@@ -45,6 +47,7 @@ export let StatusModel = {
     type: "",
     createdAt: "",
     user: 0,
+    preventIndex: true,
     username: "",
     business: 0,
     visibility: 0,
@@ -81,6 +84,7 @@ export let ProfileModel = {
     mastodonUrl: null,
     privateProfile: false,
     userInvisibleToMe: true,
+    preventIndex: true,
 };
 
 export let LeaderboardUserModel = {