UI updates - new user menu, updated about and profile screen and more (#723)

2019-04-25 17:50:28 +02:00
parent 28801bf1ea
commit 56fe14c451
83 changed files with 1067 additions and 1089 deletions
--- a/templates/user/stats.html.twig
+++ b/templates/user/stats.html.twig
@@ -0,0 +1,97 @@
+{% extends 'user/layout.html.twig' %}
+{% import "macros/actions.html.twig" as actions %}
+{% import "macros/widgets.html.twig" as widgets %}
+
+{% block profile_content %}
+
+    {% if years is empty %}
+        {{ widgets.callout('warning', 'error.no_entries_found') }}
+    {% endif %}
+
+    <script type="text/javascript">
+        var userProfileChartOptions = {
+            maintainAspectRatio     : true,
+            responsive              : true,
+            legend                  : false,
+            barPercentage           : 0.5,
+            categoryPercentage      : 0.9,
+            scales: {
+                xAxes: [{
+                    gridLines: {
+                        display: false
+                    }
+                }],
+                yAxes: [{
+                    gridLines: {
+                        display: true,
+                        color: 'rgba(0,0,0,.05)',
+                        lineWidth: 1
+                    }
+                }]
+            }
+        };
+        var userProfileChartLabels = [
+            {% for i in 1..12 %}
+            '{{ ('month.' ~i)|trans }}'
+            {% if not loop.last %},{% endif %}
+            {% endfor %}
+        ];
+    </script>
+
+    {% for year,yearStat in years %}
+
+        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
+            {% block box_title %}{{ year }}{% endblock %}
+            {% block box_body %}
+
+                <div class="chart">
+                    <canvas id="userProfileChart{{ year }}" style="height: 200px;"></canvas>
+                </div>
+                <script type="text/javascript">
+                    $(document).ready(function () {
+                        var userProfileChartData{{ year }} = {
+                            labels: userProfileChartLabels,
+                            datasets: [
+                                {
+                                    label: '{{ year }}',
+                                    backgroundColor     : '#00a65a',
+                                    borderColor         : '#00a65a',
+                                    data: [
+                                        {% for month in yearStat.months %}
+                                        {{ (month.totalDuration / 3600)|round }}
+                                        {% if not loop.last %},{% endif %}
+                                        {% endfor %}
+                                    ]
+                                }
+                            ]
+                        };
+
+                        var userProfileChartCanvas{{ year }} = $("#userProfileChart{{ year }}").get(0).getContext("2d");
+
+                        {% if tab == 'charts' %}
+                        var userProfileChart{{ year }} = new Chart(
+                            userProfileChartCanvas{{ year }}, {
+                                type: 'bar',
+                                data: userProfileChartData{{ year }},
+                                options: userProfileChartOptions
+                            }
+                        );
+                        {% endif %}
+
+                        $('a[href="#charts"]').on('shown.bs.tab', function(event){
+                            var userProfileChart{{ year }} = new Chart(
+                                userProfileChartCanvas{{ year }}, {
+                                    type: 'bar',
+                                    data: userProfileChartData{{ year }},
+                                    options: userProfileChartOptions
+                                }
+                            );
+                        });
+                    });
+                </script>
+            {% endblock %}
+        {% endembed %}
+
+    {% endfor %}
+
+{% endblock %}