Fix tour.

config/translations.php

@@ -67,6 +67,9 @@ return [
                 'wait_loading_page',
                 'withdrawal',
                 'i_owe_amount',
+                'intro_next_label',
+                'intro_prev_label',
+                'intro_done_label',
                 'i_am_owed_amount',
                 'no_data_for_chart',
                 'deposit',

eslint.config.mjs

@@ -0,0 +1,11 @@
+import js from "@eslint/js";
+import globals from "globals";
+import { defineConfig } from "eslint/config";
+
+export default defineConfig([
+  {
+      files: ["resources/assets/v3/**/*.{js,mjs,cjs}"],
+      plugins: { js },
+      extends: ["js/recommended"],
+      languageOptions: { globals: globals.browser } },
+]);

package.json

@@ -10,5 +10,10 @@
     },
     "allowScripts": {
         "@parcel/watcher@2.6.0": true
+    },
+    "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "eslint": "^10.10.0",
+        "globals": "^17.12.0"
     }
 }

resources/assets/v3/js/api/model/attachment/post.js

@@ -28,6 +28,6 @@ export default class Post {
 
     upload(id, data) {
         let url = './api/v1/attachments/' + id + '/upload';
-        return axios.post(url, data);
+        return api.post(url, data);
     }
 }

resources/assets/v3/js/boot/bootstrap.js

@@ -27,10 +27,10 @@ import axios from 'axios';
 import Shepherd from 'shepherd.js';
 import "cally";
 import {getFreshVariable} from "../store/get-fresh-variable.js";
-import {getVariable} from "../store/get-variable.js";
 import {getVariables} from "../store/get-variables.js";
 import {getViewRange} from "../support/get-viewrange.js";
 import {loadTranslations} from "../support/load-translations.js";
+import i18next from "i18next";
 
 window.bootstrapped = false;
 window.store = store;
@@ -48,14 +48,13 @@ getFreshVariable('lastActivity').then((serverValue) => {
     const localValue = store.get('lastActivity');
     store.set('cacheValid', localValue === serverValue);
     store.set('lastActivity', serverValue);
-    // console.log('Server value: ' + serverValue);
+    // console.log('Server value = ' + serverValue);
     // console.log('Local value:  ' + localValue);
     // console.log('Cache valid:  ' + (localValue === serverValue));
 }).then(() => {
     Promise.resolve(
         getVariables(['viewRange','darkMode','locale','language', 'convert_to_primary']),
     ).then((values) => {
-        //console.log(values);
         if (!store.get('start') || !store.get('end')) {
             // calculate new start and end, and store them.
             const range = getViewRange(values.viewRange, new Date);
@@ -78,61 +77,86 @@ getFreshVariable('lastActivity').then((serverValue) => {
             // console.log('Bootstrapped!');
 
             // page may have an introduction necessary to be played.
-            // if (!showTour) {
-            //     return;
-            // }
-//             const url = '/';
-//             let site = axios.create({baseURL: url, withCredentials: true});
-//             axios.defaults.withCredentials = true;
-//             axios.defaults.baseURL = url;
-//
-//             site.get(routeStepsUrl).then(function (data) {
-//                 let hints = data.data;
-//
-//                 const tour = new Shepherd.Tour({
-//                     useModalOverlay: true,
-//                     defaultStepOptions: {
-//                         // classes: 'shadow-md bg-purple-dark',
-//                         scrollTo: true
-//                     }
-//                 });
-// // cancel, complete
-//                 tour.on('cancel', (eventOptions) => {
-//                     site.post(routeForFinishedTour);
-//                 });
-//                 tour.on('complete', (eventOptions) => {
-//                     site.post(routeForFinishedTour);
-//                 });
-//
-//                 for (let i = 0; i < hints.length; i++) {
-//                     if (hints.hasOwnProperty(i)) {
-//                         let hint = hints[i];
-//
-//                         let step = {
-//                             // id: 'example-step',
-//                             text: hint.text,
-//
-//                             classes: 'example-step-extra-class',
-//                             buttons: [
-//                                 {
-//                                     text: 'Next',
-//                                     action: tour.next
-//                                 }
-//                             ]
-//                         };
-//                         if (hint.hasOwnProperty('element')) {
-//                             step.attachTo = {
-//                                 element: hint.element,
-//                                 on: hint.position
-//                             };
-//                         }
-//                         tour.addStep(step);
-//                     }
-//                 }
-//                 tour.start();
-//
-//
-//             });
+            if (!window.showTour) {
+                console.log('Will not show introduction tour for this page');
+                return;
+            }
+            const url = '/';
+            let site = axios.create({baseURL: url, withCredentials: true});
+            axios.defaults.withCredentials = true;
+            axios.defaults.baseURL = url;
+
+            site.get(window.routeStepsUrl).then(function (data) {
+                let hints = data.data;
+
+                const tour = new Shepherd.Tour({
+                    useModalOverlay: true,
+                    defaultStepOptions: {
+                        // classes: 'shadow-md bg-purple-dark',
+                        scrollTo: true,
+                        cancelIcon: {
+                            enabled: true
+                        },
+                    }
+                });
+                // cancel or complete
+                tour.on('cancel', (eventOptions) => {
+                    site.post(window.routeForFinishedTour);
+                });
+                tour.on('complete', (eventOptions) => {
+                    site.post(window.routeForFinishedTour);
+                });
+
+                for (let i = 0; i < hints.length; i++) {
+                    if (hints.hasOwnProperty(i)) {
+                        let hint = hints[i];
+
+                        let buttons = [];
+                        if(i > 0) {
+                            buttons.push(
+                                {
+                                    text: i18next.t('firefly.intro_prev_label'),
+                                    action: tour.back
+                                }
+                            );
+                        }
+                        if(i < hints.length - 1) {
+                            buttons.push(
+                                {
+                                    text: i18next.t('firefly.intro_next_label'),
+                                    action: tour.next
+                                }
+                            );
+                        }
+                        if(i === hints.length - 1) {
+                            console.log('Add complete');
+                            buttons.push(
+                                {
+                                    text: i18next.t('firefly.intro_done_label'),
+                                    action: tour.complete
+                                }
+                            );
+                        }
+
+
+                        let step = {
+                            // id: 'example-step',
+                            text: hint.text,
+                            buttons: buttons
+                        };
+                        if (hint.hasOwnProperty('element')) {
+                            step.attachTo = {
+                                element: hint.element,
+                                on: hint.position
+                            };
+                        }
+                        tour.addStep(step);
+                    }
+                }
+                tour.start();
+
+
+            });
 
         });
 

resources/assets/v3/js/store/get-variable.js

@@ -23,7 +23,7 @@ import Post from "../api/preferences/post.js";
 
 export function getVariable(name, defaultValue = null) {
     const validCache = window.store.get('cacheValid');
-    console.log('Cache valid: ', validCache);
+    // console.log('Cache valid: ', validCache);
     // currently unused, window.X can be used by the blade template
     // to make things available quicker than if the store has to grab it through the API.
     // then again, it's not that slow.

resources/views/index.blade.php

@@ -58,7 +58,7 @@
                 </div>
             </div>
         </div>
-        <div class="col-lg-4 col-md-12 col-sm-12">
+        <div class="col-lg-4 col-md-12 col-sm-12" id="all_transactions">
             <!--TRANSACTIONS -->
             @foreach($transactions as $data)
                 <div class="card card-outline mb-2">

resources/views/layout/v3/session.blade.php

@@ -349,15 +349,15 @@
 {{-- introduction --}}
 @if(!$shownDemo)
     <script type="text/javascript" nonce="{{ $JS_NONCE }}">
-        var showTour = true;
-        var routeForTour = "{{ $current_route_name }}";
-        var routeStepsUrl = "{{ route('json.intro', [$current_route_name, $objectType ?? '']) }}";
-        var routeForFinishedTour = "{{ route('json.intro.finished', [$current_route_name, $objectType ?? '']) }}";
+        window.showTour = true;
+        // var routeForTour = "{{ $current_route_name }}";
+        window.routeStepsUrl = "{{ route('json.intro', [$current_route_name, $objectType ?? '']) }}";
+        window.routeForFinishedTour = "{{ route('json.intro.finished', [$current_route_name, $objectType ?? '']) }}";
     </script>
 @endif
 @if($shownDemo)
     <script type="text/javascript" nonce="{{ $JS_NONCE }}">
-        var showTour = false;
+        window.showTour = false;
     </script>
 @endif