templates/dashboard/dashboard.html.twig line 1

  1. {% extends 'main.html.twig' %}
  2. {% block main %}
  3.     <div class="container-fluid p-0">
  4.         {% if is_granted('ROLE_ADMIN') %}
  5.             <div class="row">
  6.                 <div class="col-md-4 col-12">
  7.                     <div class="card">
  8.                         <div class="card-body">
  9.                             <div class="row">
  10.                                 <div class="col mt-0">
  11.                                     <h5 class="card-title">Jobanzeigen insgesamt</h5>
  12.                                 </div>
  14.                                 <div class="col-auto">
  15.                                     <div class="stat text-primary">
  16.                                         <i class="align-middle" data-feather="users"></i>
  17.                                     </div>
  18.                                 </div>
  19.                             </div>
  20.                             <h1 class="mt-1 mb-3">{{ counts.job.value }}</h1>
  21.                             <div class="mb-0">
  22.                                 <span class="badge badge-success-light"> <i
  23.                                             class="mdi mdi-arrow-bottom-right"></i> {{ counts.job.prog }} </span>
  24.                                 <span class="text-muted">Seit letzter Woche</span>
  25.                             </div>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.                 <div class="col-md-4 col-12">
  30.                     <div class="card">
  31.                         <div class="card-body">
  32.                             <div class="row">
  33.                                 <div class="col mt-0">
  34.                                     <h5 class="card-title">Suchanfragen insgesamt</h5>
  35.                                 </div>
  37.                                 <div class="col-auto">
  38.                                     <div class="stat text-primary">
  39.                                         <i class="align-middle" data-feather="search"></i>
  40.                                     </div>
  41.                                 </div>
  42.                             </div>
  43.                             <h1 class="mt-1 mb-3">{{ counts.search.value }}</h1>
  44.                             <div class="mb-0">
  45.                                 <span class="badge {% if counts.search.prog starts with '+' %}badge-success-light{% else %}badge-danger-light{% endif %}"> <i
  46.                                             class="mdi mdi-arrow-bottom-right"></i> {{ counts.search.prog }} </span>
  47.                                 <span class="text-muted">Seit letzter Woche</span>
  48.                             </div>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.                 <div class="col-md-4 col-12">
  53.                     <div class="card">
  54.                         <div class="card-body">
  55.                             <div class="row">
  56.                                 <div class="col mt-0">
  57.                                     <h5 class="card-title">Benutzer insgesamt</h5>
  58.                                 </div>
  60.                                 <div class="col-auto">
  61.                                     <div class="stat text-primary">
  62.                                         <i class="align-middle" data-feather="user"></i>
  63.                                     </div>
  64.                                 </div>
  65.                             </div>
  66.                             <h1 class="mt-1 mb-3">{{ counts.user.value }}</h1>
  67.                             <div class="mb-0">
  68.                                 <span class="badge badge-success-light"> <i
  69.                                             class="mdi mdi-arrow-bottom-right"></i> {{ counts.user.prog }} </span>
  70.                                 <span class="text-muted">Seit letzter Woche</span>
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                 </div>
  75.             </div>
  76.             <div class="row">
  77.                 <div class="col-md-6 col-12">
  78.                     <div class="card flex-fill">
  79.                         <div class="card-header">
  80.                             <div class="card-actions float-end nav-tabs" role="tablist">
  81.                                 <button class="btn btn-sm btn-light active" id="all-tab" data-bs-toggle="tab"
  82.                                         data-bs-target="#all" type="button" role="tab" aria-controls="all"
  83.                                         aria-selected="true">alle
  84.                                 </button>
  85.                                 <button class="btn btn-sm btn-light" id="day7-tab" data-bs-toggle="tab"
  86.                                         data-bs-target="#day7" type="button" role="tab" aria-controls="day7"
  87.                                         aria-selected="true">7 Tage
  88.                                 </button>
  89.                                 <button class="btn btn-sm btn-light" id="day30-tab" data-bs-toggle="tab"
  90.                                         data-bs-target="#day30" type="button" role="tab" aria-controls="day30"
  91.                                         aria-selected="true">30 Tage
  92.                                 </button>
  93.                                 <button class="btn btn-sm btn-light" id="day120-tab" data-bs-toggle="tab"
  94.                                         data-bs-target="#day120" type="button" role="tab" aria-controls="day120"
  95.                                         aria-selected="true">120 Tage
  96.                                 </button>
  97.                             </div>
  98.                             <h5 class="card-title mb-0">Ergebnisse nach Ort</h5>
  99.                         </div>
  100.                         <div class="card-body tab-content">
  101.                             {% for k,c in city_stats %}
  102.                                 <div class="tab-pane fade{% if k == 'all' %} show active{% endif %}" id="{{ k }}"
  103.                                      role="tabpanel" aria-labelledby="{{ k }}-tab">
  104.                                     <table class="table table-sm table-striped my-0">
  105.                                         <tr>
  106.                                             <th>Ort</th>
  107.                                             <th>Anzahl</th>
  108.                                         </tr>
  109.                                         {% for d in c %}
  110.                                             <tr>
  111.                                                 <td>{{ d.city }}</td>
  112.                                                 <td>{{ d.count }}</td>
  113.                                             </tr>
  114.                                         {% endfor %}
  115.                                     </table>
  116.                                 </div>
  117.                             {% endfor %}
  118.                         </div>
  119.                     </div>
  120.                 </div>
  121.                 <div class="col-md-6 col-12">
  122.                     <div class="card flex-fill w-100">
  123.                         <div class="card-header">
  124.                             <div class="card-actions float-end">
  125.                                 <div class="dropdown position-relative">
  126.                                     <a href="#" data-bs-toggle="dropdown" data-bs-display="static">
  127.                                         <i class="align-middle" data-feather="more-horizontal"></i>
  128.                                     </a>
  130.                                     <div class="dropdown-menu dropdown-menu-end">
  131.                                         <a class="dropdown-item" href="#">Action</a>
  132.                                         <a class="dropdown-item" href="#">Another action</a>
  133.                                         <a class="dropdown-item" href="#">Something else here</a>
  134.                                     </div>
  135.                                 </div>
  136.                             </div>
  137.                             <h5 class="card-title mb-0">Top User</h5>
  138.                         </div>
  139.                         <div class="card-body d-flex">
  140.                             <div class="align-self-center w-100">
  141.                                 <div class="py-3">
  142.                                     <div class="chart chart-xs">
  143.                                         <canvas id="chartjs-dashboard-pie"></canvas>
  144.                                     </div>
  145.                                 </div>
  147.                                 <table class="table mb-0">
  148.                                     <tbody>
  149.                                     {% for u in top_users %}
  150.                                         <tr>
  151.                                             <td><i class="fas fa-circle fa-fw" style="color:{{ u.color }}"></i> {{ u.lastname }}
  152.                                                 , {{ u.firstname }}</td>
  153.                                             <td class="text-end">{{ u.count }}</td>
  154.                                         </tr>
  155.                                     {% endfor %}
  156.                                     </tbody>
  157.                                 </table>
  158.                             </div>
  159.                         </div>
  160.                     </div>
  161.                 </div>
  162.             </div>
  163.             <div class="row">
  164.                 <div class="col-md-4 col-12">
  165.                     <div class="card flex-fill">
  166.                         <div class="card-header">
  167.                             <h5 class="card-title mb-0">Letzte Suchanfragen</h5>
  168.                         </div>
  169.                         <table class="table table-sm table-striped my-0">
  170.                             <thead>
  171.                             <tr>
  172.                                 <th>Suchwort</th>
  173.                             </tr>
  174.                             </thead>
  175.                             <tbody>
  176.                             {% for s in last_searches %}
  177.                                 <tr>
  178.                                     <td>{{ s.search }}</td>
  179.                                 </tr>
  180.                             {% endfor %}
  181.                             </tbody>
  182.                         </table>
  183.                     </div>
  184.                 </div>
  185.                 <div class="col-md-4 col-12">
  186.                     <div class="card flex-fill">
  187.                         <div class="card-header">
  188.                             <h5 class="card-title mb-0">Letzte gefundene Jobs</h5>
  189.                         </div>
  190.                         <table class="table table-sm table-striped my-0">
  191.                             <thead>
  192.                             <tr>
  193.                                 <th>Job</th>
  194.                             </tr>
  195.                             </thead>
  196.                             <tbody>
  197.                             {% for j in last_jobs %}
  198.                                 <tr>
  199.                                     <td>{{ j.title }}</td>
  200.                                 </tr>
  201.                             {% endfor %}
  202.                             </tbody>
  203.                         </table>
  204.                     </div>
  205.                 </div>
  206.                 <div class="col-md-4 col-12">
  207.                     <div class="card flex-fill">
  208.                         <div class="card-header">
  209.                             <h5 class="card-title mb-0">Top Suchbegriffe</h5>
  210.                         </div>
  211.                         <table class="table table-sm table-striped my-0">
  212.                             <thead>
  213.                             <tr>
  214.                                 <th>Suchbegriff</th>
  215.                                 <th>Anzahl</th>
  216.                             </tr>
  217.                             </thead>
  218.                             <tbody>
  219.                             {% for s in most_searchwords %}
  220.                                 <tr>
  221.                                     <td>{{ s.search }}</td>
  222.                                     <td>{{ s.count }}</td>
  223.                                 </tr>
  224.                             {% endfor %}
  225.                             </tbody>
  226.                         </table>
  227.                     </div>
  228.                 </div>
  229.             </div>
  230.         {% else %}
  231.             <div class="row">
  232.                 <div class="col-12 col-lg-8 col-xxl-9 d-flex">
  233.                     <div class="card flex-fill">
  234.                         <div class="card-header">
  236.                             <h5 class="card-title mb-0">Zuletzt gesucht</h5>
  237.                         </div>
  238.                         <table class="table table-hover my-0">
  239.                             <thead>
  240.                             <tr>
  241.                                 <th>Suchbegriff</th>
  242.                                 <th>Ort</th>
  243.                                 <th>Treffer</th>
  244.                             </tr>
  245.                             </thead>
  246.                             <tbody>
  247.                             {% for search in searches %}
  248.                                 <tr>
  249.                                     <td>{{ search.search }}</td>
  250.                                     <td>{{ search.location }}, Umkreis: {{ search.distance }}km</td>
  251.                                     <td><span class="badge bg-success">{{ search.hits }}</span></td>
  252.                                 </tr>
  253.                             {% endfor %}
  254.                             </tbody>
  255.                         </table>
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         {% endif %}
  260.     </div>
  261.     <script>
  262.         document.addEventListener("DOMContentLoaded", function () {
  263.             // Pie chart
  264.             new Chart(document.getElementById("chartjs-dashboard-pie"), {
  265.                 type: "pie",
  266.                 data: {
  267.                     labels: [
  268.                         {% for u in top_users %}
  269.                         "{{ u.lastname }}, {{ u.firstname }}",
  270.                         {% endfor %}
  271.                     ],
  272.                     datasets: [{
  273.                         data: [
  274.                             {% for u in top_users %}
  275.                             {{ u.count|raw }},
  276.                             {% endfor %}
  277.                         ],
  278.                         backgroundColor: [
  279.                             {% for u in top_users %}
  280.                             "{{ u.color }}",
  281.                             {% endfor %}
  282.                         ],
  283.                         borderWidth: 5,
  284.                         borderColor: window.theme.white
  285.                     }]
  286.                 },
  287.                 options: {
  288.                     responsive: !window.MSInputMethodContext,
  289.                     maintainAspectRatio: false,
  290.                     legend: {
  291.                         display: false
  292.                     },
  293.                     cutoutPercentage: 70
  294.                 }
  295.             });
  296.         });
  297.     </script>
  298. {% endblock %}