Improve pages to show intro texts.

app/Http/Controllers/Controller.php

@@ -23,6 +23,7 @@ use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 use Illuminate\Foundation\Bus\DispatchesJobs;
 use Illuminate\Foundation\Validation\ValidatesRequests;
 use Illuminate\Routing\Controller as BaseController;
+use Log;
 use Route;
 use Session;
 use URL;
@@ -49,40 +50,48 @@ class Controller extends BaseController
      */
     public function __construct()
     {
+        // for transaction lists:
         View::share('hideBudgets', false);
         View::share('hideCategories', false);
         View::share('hideBills', false);
         View::share('hideTags', false);
+
+        // is site a demo site?
         $isDemoSite = FireflyConfig::get('is_demo_site', config('firefly.configuration.is_demo_site'))->data;
         View::share('IS_DEMO_SITE', $isDemoSite);
         View::share('DEMO_USERNAME', env('DEMO_USERNAME', ''));
         View::share('DEMO_PASSWORD', env('DEMO_PASSWORD', ''));
 
-        // translations:
+
         $this->middleware(
             function ($request, $next) {
+                // translations for specific strings:
                 $this->monthFormat       = (string)trans('config.month');
                 $this->monthAndDayFormat = (string)trans('config.month_and_day');
                 $this->dateTimeFormat    = (string)trans('config.date_time');
 
                 // get shown-intro-preference:
                 if (auth()->check()) {
-                    $route         = Route::currentRouteName();
+                    // some routes have a "what" parameter, which indicates a special page:
-                    $originalRoute = $route;
+                    $specificPage = is_null(Route::current()->parameter('what')) ? '' : '_' . Route::current()->parameter('what');
+                    $page         = str_replace('.', '_', Route::currentRouteName());
 
-                    // TODO get parameters from route?
+                    // indicator if user has seen the help for this page ( + special page):
-
+                    $key = 'shown_demo_' . $page . $specificPage;
-                    $route         = str_replace('.', '_', $route);
+                    // is there an intro for this route?
-                    $key           = 'shown_demo_' . $route;
+                    $intro        = config('intro.' . $page);
-                    $config        = config('intro.' . $route);
+                    $specialIntro = config('intro.' . $page . $specificPage);
-                    $shownDemo     = Preferences::get($key, false)->data;
-                    if (is_null($config) || (is_array($config) && count($config) === 0)) {
-                        // no demo when no data for demo.
                     $shownDemo    = true;
+
+                    // either must be array and either must be > 0
+                    if ((is_array($intro) || is_array($specialIntro)) && (count($intro) > 0 || count($specialIntro) > 0)) {
+                        $shownDemo = Preferences::get($key, false)->data;
+                        Log::debug(sprintf('Check if user has already seen intro with key "%s". Result is %d', $key, $shownDemo));
                     }
+
                     View::share('shownDemo', $shownDemo);
-                    View::share('current_route_name', $route);
+                    View::share('current_route_name', $page);
-                    View::share('original_route_name', $originalRoute);
+                    View::share('original_route_name', Route::currentRouteName());
                 }
 
                 return $next($request);

app/Http/Controllers/Json/IntroController.php

@@ -11,6 +11,8 @@ declare(strict_types=1);
 
 namespace FireflyIII\Http\Controllers\Json;
 
+use FireflyIII\Support\Facades\Preferences;
+use Log;
 use Response;
 
 /**
@@ -60,6 +62,9 @@ class IntroController
     {
         $routeKey = str_replace('.', '_', $route);
         $elements = config(sprintf('intro.%s', $routeKey));
+        if (!is_array($elements)) {
+            return false;
+        }
         $keys = array_keys($elements);
 
         return in_array('outro', $keys);
@@ -67,13 +72,17 @@ class IntroController
 
     /**
      * @param string $route
+     * @param string $specialPage
      *
      * @return \Illuminate\Http\JsonResponse
      */
-    public function postFinished(string $route)
+    public function postFinished(string $route, string $specialPage = '')
     {
         $key = 'shown_demo_' . $route;
-
+        if ($specialPage !== '') {
+            $key .= '_' . $specialPage;
+        }
+        Log::debug(sprintf('Going to mark the following route as doen: %s with special "%s" (%s)', $route, $specialPage, $key));
         //Preferences::set($key, true);
 
         return Response::json(['result' => sprintf('Reported demo watched for route "%s".', $route)]);
@@ -122,7 +131,6 @@ class IntroController
             if (is_array($elements) && count($elements) > 0) {
                 foreach ($elements as $key => $options) {
                     $currentStep = $options;
-                    $currentStep['element'] = $options['selector'];
 
                     // get the text:
                     $currentStep['intro'] = trans('intro.' . $route . '_' . $specificPage . '_' . $key);

config/intro.php

@@ -49,32 +49,58 @@ return [
     // reports: index, default report, audit, budget, cat, tag
     'reports_index'                  => [
         'intro'               => [],
+        'inputReportType'     => ['element' => '#inputReportType'],
+        'inputAccountsSelect' => ['element' => '#inputAccountsSelect'],
+        'inputDateRange'      => ['element' => '#inputDateRange'],
+        'extra-options-box'   => ['element' => '#extra-options-box'],
     ],
     'reports_report_default'         => [
         'intro' => [],
     ],
     'reports_report_audit'           => [
         'intro'      => [],
+        'optionsBox' => ['element' => '#optionsBox'],
     ],
     'reports_report_category'        => [
         'intro'                  => [],
+        'pieCharts'              => ['element' => '#pieCharts'],
+        'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
+
     ],
-    'reports_report_report'   => [
+    'reports_report_tag'             => [
         'intro'                  => [],
+        'pieCharts'              => ['element' => '#pieCharts'],
+        'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
     ],
     'reports_report_budget'          => [
         'intro'                  => [],
+        'pieCharts'              => ['element' => '#pieCharts'],
+        'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
     ],
 
-    // transactions: create
+    // transactions: create (also per type!)
     'transactions_create'            => [
         'intro'            => [],
         'switch_box'       => ['element' => '#switch-box'],
         'ffInput_category' => ['element' => '#ffInput_category'],
     ],
+    'transactions_create_withdrawal' => [
+        'ffInput_budget'           => ['element' => '#ffInput_budget_id'],
+        'currency_dropdown_amount' => ['element' => '#currency_dropdown_amount'],
+    ],
+    'transactions_create_deposit'    => [
+        'currency_dropdown_amount' => ['element' => '#currency_dropdown_amount'],
+    ],
+    'transactions_create_transfer'   => [
+        'ffInput_piggy_bank_id' => ['element' => '#ffInput_piggy_bank_id'],
+    ],
+
     // piggies: index, create, show
     'piggy-banks_index'              => [
         'intro'         => [],
+        'saved'         => ['element' => '.piggySaved'],
+        'button'        => ['element' => '.piggyBar',],
+        'accountStatus' => ['element' => '#accountStatus', 'position' => 'top'],
     ],
     'piggy-banks_create'             => [
         'intro' => [],

public/js/ff/intro/intro.js

@@ -10,8 +10,9 @@
 
 $(function () {
     "use strict";
-    //alert('show user intro for ' + route_for_tour);
+    if(!forceDemoOff) {
         $.getJSON(routeStepsUri).done(setupIntro)
+    }
 });
 
 function setupIntro(steps) {

resources/views/layout/default.twig

@@ -33,6 +33,9 @@
     <script src="js/lib/html5shiv.min.js"></script>
     <script src="js/lib/respond.min.js"></script>
     <![endif]-->
+    <script type="text/javascript">
+        var forceDemoOff = false;
+    </script>
 
     {# favicons #}
     {% include('partials.favicons') %}
@@ -185,7 +188,7 @@
     <script type="text/javascript">
         var routeForTour = "{{ current_route_name }}";
         var routeStepsUri = "{{ route('json.intro', [current_route_name, what|default("")]) }}";
-        var routeForFinishedTour = "{{ route('json.intro.finished', [current_route_name]) }}";
+        var routeForFinishedTour = "{{ route('json.intro.finished', [current_route_name, what|default("")]) }}";
     </script>
     <script type="text/javascript" src="lib/intro/intro.min.js"></script>
     <script type="text/javascript" src="js/ff/intro/intro.js"></script>

resources/views/list/piggy-banks.twig

@@ -34,7 +34,7 @@
             <td>
                 <a href="{{ route('piggy-banks.show', piggyBank.id) }}" title="{{ piggyBank.account.name }}">{{ piggyBank.name }}</a>
             </td>
-            <td style="text-align: right;">
+            <td style="text-align: right;" class="piggySaved">
                 <span title="Saved so far" style="text-align:right;">{{ piggyBank.savedSoFar|formatAmount }}</span>
             </td>
             <td class="hidden-sm hidden-xs" style="text-align:right;width:40px;">
@@ -44,7 +44,7 @@
                 {% endif %}
             </td>
 
-            <td class="hidden-sm hidden-xs">
+            <td class="hidden-sm hidden-xs piggyBar">
                 <div class="progress progress" style="margin-bottom:0;">
                     <div
                             {% if piggyBank.percentage == 100 %}

resources/views/partials/empty.twig

@@ -21,3 +21,6 @@
         </div>
     </div>
 </div>
+<script type="text/javascript">
+    forceDemoOff = true;
+</script>

resources/views/piggy-banks/index.twig

@@ -28,7 +28,7 @@
                         <h3 class="box-title">{{ 'account_status'|_ }}</h3>
                     </div>
                     <div class="box-body table-responsive no-padding">
-                        <table class="table table-hover">
+                            <table class="table table-hover" id="accountStatus">
                             <thead>
                             <tr>
                                 <th>{{ 'account'|_ }}</th>

resources/views/reports/audit/report.twig

@@ -9,7 +9,7 @@
     <!-- options block -->
     <div class="row no-print">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-            <div class="box">
+            <div class="box" id="optionsBox">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'options'|_ }}</h3>
                 </div>

resources/views/reports/budget/month.twig

@@ -88,7 +88,7 @@
             </div>
         {% endif %}
         <div class="col-lg-4 col-md-6">
-            <div class="box">
+            <div class="box" id="pieCharts">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'expense_per_account'|_ }}</h3>
                 </div>
@@ -107,7 +107,7 @@
 
     <div class="row">
         <div class="col-lg-12">
-            <div class="box">
+            <div class="box" id="incomeAndExpensesChart">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                 </div>

resources/views/reports/category/month.twig

@@ -114,7 +114,7 @@
                 </div>
             </div>
         {% endif %}
-        <div class="col-lg-2 col-md-3">
+        <div class="col-lg-2 col-md-3" id="pieCharts">
             <div class="box">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_per_account'|_ }}</h3>
@@ -146,7 +146,7 @@
 
     <div class="row">
         <div class="col-lg-12">
-            <div class="box">
+            <div class="box" id="incomeAndExpensesChart">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                 </div>

resources/views/reports/index.twig

@@ -35,8 +35,8 @@
                         <div class="form-group">
                             <label for="inputAccounts" class="col-sm-3 control-label">{{ 'report_included_accounts'|_ }}</label>
 
-                            <div class="col-sm-9">
+                            <div class="col-sm-9" id="inputAccountsSelect">
-                                <select id="inputAccounts" name="accounts[]" multiple="multiple" class="form-control">
+                                <select id="inputAccounts" name="accounts[]" multiple class="form-control">
                                     {% for account in accounts %}
                                         <option
                                                 value="{{ account.id }}"

resources/views/reports/tag/month.twig

@@ -47,7 +47,7 @@
             </div>
         </div>
         <div class="col-lg-2 col-md-3">
-            <div class="box">
+            <div class="box" id="pieCharts">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_per_tag'|_ }}</h3>
                 </div>
@@ -168,7 +168,7 @@
 
     <div class="row">
         <div class="col-lg-12">
-            <div class="box">
+            <div class="box" id="incomeAndExpensesChart">
                 <div class="box-header with-border">
                     <h3 class="box-title">{{ 'income_and_expenses'|_ }}</h3>
                 </div>