Improve pages to show intro texts.

2025-02-25 18:45:27 -06:00 · 2017-07-22 10:50:30 +02:00 · 2017-07-22 10:50:30 +02:00 · 5b69a697e4
commit 5b69a697e4
parent f2d388f742
13 changed files with 119 additions and 69 deletions
--- a/app/Http/Controllers/Controller.php
+++ b/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();
-                    $originalRoute = $route;
+                    // some routes have a "what" parameter, which indicates a special page:
+                    $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;
+                    // is there an intro for this route?
+                    $intro        = config('intro.' . $page);
+                    $specialIntro = config('intro.' . $page . $specificPage);
+                    $shownDemo    = true;

-                    $route         = str_replace('.', '_', $route);
-                    $key           = 'shown_demo_' . $route;
-                    $config        = config('intro.' . $route);
-                    $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('original_route_name', $originalRoute);
+                    View::share('current_route_name', $page);
+                    View::share('original_route_name', Route::currentRouteName());
                }

                return $next($request);
--- a/app/Http/Controllers/Json/IntroController.php
+++ b/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,20 +62,27 @@ class IntroController
    {
        $routeKey = str_replace('.', '_', $route);
        $elements = config(sprintf('intro.%s', $routeKey));
-        $keys     = array_keys($elements);
+        if (!is_array($elements)) {
+            return false;
+        }
+        $keys = array_keys($elements);

        return in_array('outro', $keys);
    }

    /**
     * @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)]);
@ -121,8 +130,7 @@ class IntroController
            $elements = config(sprintf('intro.%s', $routeKey . '_' . $specificPage));
            if (is_array($elements) && count($elements) > 0) {
                foreach ($elements as $key => $options) {
-                    $currentStep            = $options;
-                    $currentStep['element'] = $options['selector'];
+                    $currentStep = $options;

                    // get the text:
                    $currentStep['intro'] = trans('intro.' . $route . '_' . $specificPage . '_' . $key);
--- a/config/intro.php
+++ b/config/intro.php
@ -15,7 +15,7 @@ declare(strict_types=1);

 return [
    // index
-    'index'                   => [
+    'index'                          => [
        'intro'          => [],
        'accounts-chart' => ['element' => '#accounts-chart'],
        'box_out_holder' => ['element' => '#box_out_holder'],
@ -24,19 +24,19 @@ return [
        'outro'          => [],
    ],
    // accounts: create
-    'accounts_create'         => [
+    'accounts_create'                => [
        'intro' => [],
        'iban'  => ['element' => '#ffInput_iban'],
    ],
    // extra text for asset account creation.
-    'accounts_create_asset'   => [
+    'accounts_create_asset'          => [
        'opening_balance' => ['element' => '#ffInput_openingBalance'],
        'currency'        => ['element' => '#ffInput_currency_id'],
        'virtual'         => ['element' => '#ffInput_virtualBalance'],
    ],

    // budgets: index
-    'budgets_index'           => [
+    'budgets_index'                  => [
        'intro'            => [],
        'set_budget'       => ['element' => '#availableBar',],
        'see_expenses_bar' => ['element' => '#spentBar'],
@ -47,54 +47,80 @@ return [
    ],
    // tags: wait for upgrade
    // reports: index, default report, audit, budget, cat, tag
-    'reports_index'           => [
+    '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_default'  => [
-        'intro' => [],
+    'reports_report_audit'           => [
+        'intro'      => [],
+        'optionsBox' => ['element' => '#optionsBox'],
    ],
-    'reports_report_audit'    => [
-        'intro' => [],
+    'reports_report_category'        => [
+        'intro'                  => [],
+        'pieCharts'              => ['element' => '#pieCharts'],
+        'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
+
    ],
-    'reports_report_category' => [
-        'intro' => [],
+    'reports_report_tag'             => [
+        'intro'                  => [],
+        'pieCharts'              => ['element' => '#pieCharts'],
+        'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
    ],
-    'reports_report_report'   => [
-        'intro' => [],
-    ],
-    'reports_report_budget'   => [
-        'intro' => [],
+    'reports_report_budget'          => [
+        'intro'                  => [],
+        'pieCharts'              => ['element' => '#pieCharts'],
+        'incomeAndExpensesChart' => ['element' => '#incomeAndExpensesChart', 'position' => 'top'],
    ],

-    // transactions: create
-    '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'       => [
+    'piggy-banks_index'              => [
+        'intro'         => [],
+        'saved'         => ['element' => '.piggySaved'],
+        'button'        => ['element' => '.piggyBar',],
+        'accountStatus' => ['element' => '#accountStatus', 'position' => 'top'],
+    ],
+    'piggy-banks_create'             => [
        'intro' => [],
    ],
-    'piggy-banks_create'      => [
-        'intro' => [],
-    ],
-    'piggy-banks_show'        => [
+    'piggy-banks_show'               => [
        'intro' => [],
    ],

    // bills: index, create, show
-    'bills_index'             => [
+    'bills_index'                    => [
        'intro' => [],
    ],
-    'bills_create'            => [
+    'bills_create'                   => [
        'intro' => [],
    ],
-    'bills_show'              => [
+    'bills_show'                     => [
        'intro' => [],
    ],
    // rules: index, create-rule, edit-rule
-    'rules_index'             => [
+    'rules_index'                    => [
        'intro'          => [],
        'new_rule_group' => ['element' => '#new_rule_group'],
        'new_rule'       => ['element' => '.new_rule'],
@ -103,36 +129,36 @@ return [
        'rule-triggers'  => ['element' => '.rule-triggers'],
        'outro'          => [],
    ],
-    'rules_create'            => [
+    'rules_create'                   => [
        'intro' => [],
    ],
-    'rules_edit'              => [
+    'rules_edit'                     => [
        'intro' => [],
    ],
    // import: index, config-steps
-    'import_index'            => [
+    'import_index'                   => [
        'intro' => [],
    ],
-    'import_configure'        => [
+    'import_configure'               => [
        'intro' => [],
    ],
    // export: index
-    'export_index'            => [
+    'export_index'                   => [
        'intro' => [],
    ],
    // preferences: index
-    'preferences_index'       => [
+    'preferences_index'              => [
        'intro' => [],
    ],
    // currencies: index, create
-    'currencies_index'        => [
+    'currencies_index'               => [
        'intro' => [],
    ],
-    'currencies_create'       => [
+    'currencies_create'              => [
        'intro' => [],
    ],
    // admin: index
-    'admin_index'             => [
+    'admin_index'                    => [
        'intro' => [],
    ],

--- a/public/js/ff/intro/intro.js
+++ b/public/js/ff/intro/intro.js
@ -10,8 +10,9 @@

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

 function setupIntro(steps) {
--- a/resources/views/layout/default.twig
+++ b/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>
--- a/resources/views/list/piggy-banks.twig
+++ b/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 %}
--- a/resources/views/partials/empty.twig
+++ b/resources/views/partials/empty.twig
@ -21,3 +21,6 @@
        </div>
    </div>
 </div>
+<script type="text/javascript">
+    forceDemoOff = true;
+</script>
--- a/resources/views/piggy-banks/index.twig
+++ b/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>
--- a/resources/views/reports/audit/report.twig
+++ b/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>
--- a/resources/views/reports/budget/month.twig
+++ b/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>
--- a/resources/views/reports/category/month.twig
+++ b/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>
--- a/resources/views/reports/index.twig
+++ b/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">
-                                <select id="inputAccounts" name="accounts[]" multiple="multiple" class="form-control">
+                            <div class="col-sm-9" id="inputAccountsSelect">
+                                <select id="inputAccounts" name="accounts[]" multiple class="form-control">
                                    {% for account in accounts %}
                                        <option
                                                value="{{ account.id }}"
--- a/resources/views/reports/tag/month.twig
+++ b/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>