From a3be062238045699d818c19da2df77e82b87d395 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Thu, 17 Jan 2019 17:29:21 +0100
Subject: [PATCH] table

---
 Step/wwwroot/assets/styles/base/report.less   | 140 ++++++-
 Step/wwwroot/assets/styles/style.css          | 154 +++++++
 .../reports/components/reports.vue            | 395 +++++++++++++++++-
 3 files changed, 683 insertions(+), 6 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/report.less b/Step/wwwroot/assets/styles/base/report.less
index 218651d4..f470e0a4 100644
--- a/Step/wwwroot/assets/styles/base/report.less
+++ b/Step/wwwroot/assets/styles/base/report.less
@@ -187,9 +187,145 @@
                       }
                     }
                 }
-                // .body-left-table {
+                .body-left-center {
+                  width: 1448px;
+                  max-height: 681px;
+                  table{
+                    table-layout: fixed;
+                    width: 100%;
+                    border-collapse: collapse;
+                  }
+                  thead{
+                      border-bottom: solid 2px @color-label-grey;
+                      font-size: 14px;
+                      line-height: 1.29;
+                      color: @color-darkish-blue;
+                      display: block;
+                      width: 1431px;
+                  }
+                  thead tr th{
+                      height: 48px;
+                  }
+                  tr:nth-child(even) {background: #FFF }
+                  tr:nth-child(odd) {background: #dddddd }
 
-                // }
+                  // thead tr{
+                  //   width: 1448px;
+                  // }
+
+                  thead tr:nth-child(odd){
+                    background: #FFF
+                  }
+  
+                  th:nth-child(1), td:nth-child(1){
+                      width:162px;
+                      max-width: 162px;
+                      text-align: center;
+                  }  
+                  th:nth-child(2), td:nth-child(2){
+                    width:139px;
+                    max-width: 139px;
+                    text-align: center;
+                  }
+                  th:nth-child(3), td:nth-child(3){
+                      width:83px;
+                      max-width:83px;
+                      text-align: center;
+                  }
+                  th:nth-child(4), td:nth-child(4){
+                    width:83px;
+                    max-width:83px;
+                    text-align: center;
+                  }
+                  th:nth-child(5), td:nth-child(5){
+                    width:83px;
+                    max-width:83px;
+                    text-align: center;
+                  }
+                  th:nth-child(6), td:nth-child(6){
+                    width:83px;
+                    max-width:83px;
+                    text-align: center;
+                  }
+                  th:nth-child(7), td:nth-child(7){
+                      width:97px;
+                      max-width:97px;
+                      text-align: center;
+                  }
+                  th:nth-child(8), td:nth-child(8){
+                    width:97px;
+                    max-width:97px;
+                    text-align: center;
+                  }
+                  th:nth-child(9), td:nth-child(9){
+                    width:97px;
+                    max-width:97px;
+                    text-align: center;
+                  }
+                  th:nth-child(10), td:nth-child(10){
+                    width:115px;
+                    max-width:115px;
+                    text-align: center;
+                  }
+                  th:nth-child(11), td:nth-child(11){
+                    width:97px;
+                    max-width:97px;
+                    text-align: center;
+                  }
+                  th:nth-child(12), td:nth-child(12){
+                    width:148px;
+                    max-width:148px;
+                    text-align: center;
+                  }
+                  th:nth-child(13), td:nth-child(13){
+                    width:97px;
+                    max-width:97px;
+                    text-align: center;
+                  }
+                  th:nth-child(5),td:nth-child(5){
+                      width:100px;
+                      max-width:100px;
+                  }
+                  th:nth-child(6), td:nth-child(6){
+                      width:100px;
+                      max-width: 100px;
+                  }
+                  th, td{
+                      overflow: hidden;
+                      div{
+                          overflow: hidden;
+                                  max-height: 64px;
+                      }
+                  }
+                  tbody{
+                      display: block;
+                      height: 631px;
+                      width: 1448px;
+                      overflow: scroll;
+                      tr{
+                          cursor: pointer;
+                          height:  64px;
+                          padding: 10px;
+                          font-size: 14px;
+                          line-height: 1.29;
+                          color: @color-greyish-brown;
+                          td{
+                              text-align: center;
+                              &.green{
+                                color: @color-apple-green;
+                              }
+                              &.red{
+                                color: @color-scarlet;
+                              }
+                          }
+                          &.selected{
+                              background-color: rgba(23, 145, 255, 0.75);
+                              color: @color-white;
+                              font-weight: 600;
+                          }
+                      }
+                  }
+                }
             }
             .reports-box-body-right {
                 width: 327px;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 85914342..caed356a 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -14924,6 +14924,160 @@ footer .container button.big:before {
   text-decoration-color: #002680;
   text-decoration-style: solid;
 }
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center {
+  width: 1448px;
+  max-height: 681px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center thead {
+  border-bottom: solid 2px #979797;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #002680;
+  display: block;
+  width: 1431px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center thead tr th {
+  height: 48px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tr:nth-child(even) {
+  background: #FFF;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tr:nth-child(odd) {
+  background: #dddddd;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center thead tr:nth-child(odd) {
+  background: #FFF;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(1),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(1) {
+  width: 162px;
+  max-width: 162px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(2),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(2) {
+  width: 139px;
+  max-width: 139px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(3),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(3) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(4),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(4) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(5),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(5) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(6),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(6) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(7),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(7) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(8),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(8) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(9),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(9) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(10),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(10) {
+  width: 115px;
+  max-width: 115px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(11),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(11) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(12),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(12) {
+  width: 148px;
+  max-width: 148px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(13),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(13) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(5),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(5) {
+  width: 100px;
+  max-width: 100px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th:nth-child(6),
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td:nth-child(6) {
+  width: 100px;
+  max-width: 100px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th,
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td {
+  overflow: hidden;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center th div,
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center td div {
+  overflow: hidden;
+  max-height: 64px;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody {
+  display: block;
+  height: 631px;
+  width: 1448px;
+  overflow: scroll;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr {
+  cursor: pointer;
+  height: 64px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #4b4b4b;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td {
+  text-align: center;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td.green {
+  color: #7ed321;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr td.red {
+  color: #d0021b;
+}
+.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center tbody tr.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  font-weight: 600;
+}
 .reports-container .reports-box .reports-box-body .reports-box-body-right {
   width: 327px;
   height: 100%;
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue
index d70347af..eb3c55c8 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue
@@ -53,7 +53,268 @@
                         <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
                     </div>
                   </div>
-                Produzione
+                  <div class="body-left-center">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                                    <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                                    <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
+                                    <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                                    <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                                    <th>{{'reports_table_date' | localize("Data")}}</th>
+                                    <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                                    <th>{{'reports_table_average_time' | localize("T medio")}}</th>
+                                    <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                                    <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                                    <th>{{'reports_table_quality' | localize("Qualità")}}</th>
+                                    <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                                    <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <tr>
+                                    <td colspan="1">Finestra02.pgm</td>
+                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                                    <td colspan="1">1</td>
+                                    <td colspan="1">11:25:00</td>
+                                    <td colspan="1">13:10:00</td>
+                                    <td colspan="1">12/04/2017</td>
+                                    <td colspan="1">01:45:00</td>
+                                    <td colspan="1">01:25:00</td>
+                                    <td colspan="1">01:20:00</td>
+                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                                    <td colspan="1">Buono</td>
+                                    <td colspan="1">Nome utente</td>
+                                    <td colspan="1">1°</td>
+                                </tr>
+                                <!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
+                                <td colspan="1">{{row.id}}</td>
+                                <td colspan="1">{{filter.sources[row.source]}}</td>
+                                <td colspan="1" v-if="row.source == 0 ">{{row.title}}</td>
+                                <td colspan="1" v-if="row.source == 1 ">{{'alarm_'+ row.alarmId | localize('alarm_'+ row.alarmId)}}</td>
+                                <td colspan="1">{{row.description}}</td>
+                                <td colspan="1">{{row.timeStamp | date('DD-MM-YYYY HH:mm:ss')}}</td>
+                                <td colspan="1">
+                                    <span v-for="(iduser, index) in row.users" :key="iduser">
+                                    {{user(iduser).username}}
+                                    <text v-if="index < row.users.length -1">, </text>
+                                    </span>
+                                </td>
+                                </tr> -->
+                            </tbody>
+                        </table>
+                  </div>
               </div>
               <div class="reports-box-body-right">
                 <div class="body-right-header">
@@ -86,20 +347,146 @@
               </div>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Events'">
-              <div class="reports-box-body-left">
-                Events
+                <div class="reports-box-body-left">
+                  <div class="body-left-header">
+                    <div>
+                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+                    </div>
+                    <!-- <div>
+                        <label>{{'reports_body_header_label_date' | localize("Intervallo date")}}</label>
+                        <select class="reports-select-interval-date"><option>{{'reports_body_header_option_date_lastmonth' | localize("Ultimo mese")}}</option></select>
+                    </div> -->
+                    <div>
+                        <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+                        <div class="interval-time">
+                            <input type="time"/>
+                            <input type="time"/>
+                        </div>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+                        <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+                        <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+                        <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+                    </div>
+                    <div>
+                        <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
+                    </div>
+                  </div>
+                  <div class="body-left-center">
+                      Events
+                  </div>
               </div>
               <div class="reports-box-body-right">
+                <div class="body-right-header">
+                    <div class="body-right-header-left">
+                        <button><i class="fa fa-bars fa-2x"></i></button>
+                        <button><i class="fa fa-signal fa-2x"></i></button>
+                    </div>
+                    <div class="body-right-header-right">
+                        <button><i class="fa fa-print fa-2x"></i></button>
+                        <button><i class="fa fa-upload fa-2x"></i></button>
+                    </div>
+                </div>
+                <div class="body-right-card">
+                    <card-report :title="'Valore assoluto (%)'">
 
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                            <span>10.000</span>
+                        </div>
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                            <span>4</span>
+                        </div>
+                    </card-report>
+                </div>
               </div>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
               <div class="reports-box-body-left">
-                Alarms
+                
               </div>
               <div class="reports-box-body-right">
 
               </div>
+              <div class="reports-box-body-left">
+                  <div class="body-left-header">
+                    <div>
+                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+                    </div>
+                    <!-- <div>
+                        <label>{{'reports_body_header_label_date' | localize("Intervallo date")}}</label>
+                        <select class="reports-select-interval-date"><option>{{'reports_body_header_option_date_lastmonth' | localize("Ultimo mese")}}</option></select>
+                    </div> -->
+                    <div>
+                        <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+                        <div class="interval-time">
+                            <input type="time"/>
+                            <input type="time"/>
+                        </div>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+                        <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+                        <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+                        <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+                    </div>
+                    <div>
+                        <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
+                    </div>
+                  </div>
+                  <div class="body-left-center">
+                      Events
+                  </div>
+              </div>
+              <div class="reports-box-body-right">
+                <div class="body-right-header">
+                    <div class="body-right-header-left">
+                        <button><i class="fa fa-bars fa-2x"></i></button>
+                        <button><i class="fa fa-signal fa-2x"></i></button>
+                    </div>
+                    <div class="body-right-header-right">
+                        <button><i class="fa fa-print fa-2x"></i></button>
+                        <button><i class="fa fa-upload fa-2x"></i></button>
+                    </div>
+                </div>
+                <div class="body-right-card">
+                    <card-report :title="'Valore assoluto (%)'">
+
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                            <span>10.000</span>
+                        </div>
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                            <span>4</span>
+                        </div>
+                    </card-report>
+                </div>
+              </div>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'MachineStatus'">
               <div class="reports-box-body-left">