From 75223ae5b2df21045adcbf5058d347857159f06e Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Fri, 6 Apr 2018 11:22:08 +0200
Subject: [PATCH 01/26] server online/offline

---
 Step/wwwroot/assets/styles/base/layout.less |  12 +-
 Step/wwwroot/assets/styles/style.css        | 801 --------------------
 Step/wwwroot/src/services/hub.ts            |  41 +-
 3 files changed, 44 insertions(+), 810 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/layout.less b/Step/wwwroot/assets/styles/base/layout.less
index 8df1b0cf..32fa3da7 100644
--- a/Step/wwwroot/assets/styles/base/layout.less
+++ b/Step/wwwroot/assets/styles/base/layout.less
@@ -16,12 +16,12 @@
 @import "back-view.less";
 @import "head.less";
 
-@import "tooling.less";
-@import "card.less";
-@import "depot.less";
-@import "summary-depot.less";
-@import "assisted-tooling.less";
-@import "tooling-equipment.less";
+// @import "tooling.less";
+// @import "card.less";
+// @import "depot.less";
+// @import "summary-depot.less";
+// @import "assisted-tooling.less";
+// @import "tooling-equipment.less";
 
 
 @background-color: rgb(216, 216, 216);
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index ae5551ac..f1a7e112 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2480,807 +2480,6 @@ footer .container button.big:before {
 .heads-container-lt4 {
   right: -12px;
 }
-.test-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.tooling-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.tooling-container .tooling-box {
-  width: 1504px;
-  height: 759px;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-.tooling-container .tooling-box .header {
-  font-size: 24px;
-  font-weight: 600;
-  color: #002680;
-  margin-top: 18px;
-  margin-left: 24px;
-  margin-bottom: 19px;
-}
-.tooling-container .tooling-box .tooling-boxbody {
-  width: calc(100% - 160px);
-  height: calc(100% - 65px);
-  top: 65px;
-  background-color: #bbbcbc;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  display: flex;
-  flex-flow: column;
-  padding: 0 80px;
-}
-.tooling-container .tooling-box .tooling-boxbody .list-top,
-.tooling-container .tooling-box .tooling-boxbody .list-bottom {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 90%;
-  margin-bottom: 10px;
-  overflow-y: hidden;
-  overflow-x: auto;
-}
-.tool {
-  width: 360px;
-  height: 64px;
-  background-color: #fff;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  display: flex;
-  flex-flow: row;
-  align-self: center;
-  justify-items: center;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  margin-bottom: 4px;
-}
-.tool .image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 21px;
-  margin-right: 29px;
-}
-.tool .image img {
-  width: 48px;
-  height: 48px;
-}
-.tool .text-body {
-  text-align: left;
-  width: 145px;
-  margin-top: 11px;
-}
-.tool .text-right {
-  display: flex;
-  align-items: center;
-  color: #1791ff;
-}
-.tool .fa {
-  display: flex;
-  align-items: center;
-  font-size: 24px;
-  margin-left: 20px;
-  color: #002680;
-}
-.card {
-  width: 288px;
-  height: 216px;
-  background-color: #fff;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  margin: 8px;
-}
-.card > header {
-  width: 288px;
-  height: 64px;
-  border-radius: 2px;
-  background-color: #f1f1f1;
-}
-.card > header span {
-  font-size: 18px;
-  float: left;
-  color: #002680;
-  margin-top: 22px;
-  margin-left: 24px;
-}
-.card > header button {
-  float: right;
-  margin: 8px 8px 8px;
-  width: 48px;
-  height: 48px;
-  color: #002680;
-  padding: 0;
-}
-.card > header button .fa {
-  height: 22px;
-  font-size: 24px;
-  width: 25px;
-}
-.card > section {
-  height: calc(100% - 64px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.detail-card {
-  width: 288px;
-  height: 216px;
-  background-color: #fff;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  margin-right: 32px;
-}
-.detail-card header {
-  width: 288px;
-  height: 64px;
-  border-radius: 2px;
-  background-color: #f1f1f1;
-  border-bottom: 2px solid #fff;
-}
-.detail-card header .title {
-  width: 64px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: 600;
-  float: left;
-  color: #4b4b4b;
-  border-right: 2px solid #fff;
-}
-.detail-card header button {
-  float: right;
-  margin: 8px 8px 8px;
-  width: 48px;
-  height: 48px;
-  color: #002680;
-  padding: 0;
-}
-.detail-card header button .fa {
-  height: 22px;
-  font-size: 24px;
-  width: 25px;
-}
-.detail-card section {
-  height: calc(100% - 66px);
-  display: flex;
-  background-color: #f1f1f1;
-}
-.detail-card section slot {
-  text-align: center;
-}
-.equipment {
-  width: 360px;
-  height: 64px;
-  background-color: #fff;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  display: flex;
-  flex-flow: row;
-  align-self: center;
-  justify-items: center;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  margin-bottom: 4px;
-}
-.equipment .image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 16px 14px 16px 16px;
-}
-.equipment .image img {
-  width: 48px;
-  height: 48px;
-}
-.equipment .text-body {
-  text-align: left;
-  width: 145px;
-  margin-top: 11px;
-}
-.skill-equipment {
-  width: 656px;
-  height: 80px;
-  border-radius: 2px;
-  display: flex;
-  flex-flow: row;
-  background-color: #fff;
-  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-}
-.skill-equipment .skill-equipment-title {
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  margin-left: 15px;
-}
-.skill-equipment .skill-equipment-control {
-  height: 100%;
-  display: flex;
-  margin-right: 16px;
-  align-items: center;
-  margin-left: auto;
-}
-.skill-equipment .skill-equipment-control input,
-.skill-equipment .skill-equipment-control select {
-  width: 304px;
-  height: 48px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.load-equipment {
-  width: 495px;
-  height: 64px;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  display: flex;
-  flex-flow: row;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.load-equipment .image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 16px;
-  margin-right: 15px;
-}
-.load-equipment .text-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.load-equipment .arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: auto;
-  margin-right: 20px;
-}
-.load-equipment .arrow .fa-arrow-up,
-.load-equipment .arrow .fa-arrow-down {
-  font-size: 24px;
-}
-.load-equipment .arrow .fa-arrow-up {
-  color: #54AEFF;
-}
-.load-equipment .arrow .fa-arrow-down {
-  color: #DC4557;
-}
-.depot-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  /* align-items: center; */
-  justify-content: center;
-  padding-top: 104px;
-}
-.depot-container .depot-box {
-  width: 1808px;
-  height: 872px;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-.depot-container .depot-box .header {
-  font-size: 20px;
-  color: #002680;
-  height: 81px;
-  display: flex;
-  align-items: center;
-}
-.depot-container .depot-box .header .fa {
-  height: 18px;
-  width: 13px;
-  margin: 0 22px 0 29px;
-}
-.depot-container .depot-box .depot-boxbody {
-  width: 100%;
-  height: calc(100% - 161px);
-  border-radius: 2px;
-  background-color: #bbbcbc;
-  display: flex;
-  flex-flow: row;
-}
-.depot-container .depot-box .depot-boxbody .list-left {
-  height: 100%;
-  width: 440px;
-  float: left;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-color: #fff;
-  font-size: 18px;
-  line-height: 1.11;
-  text-align: center;
-  color: #4b4b4b;
-  display: flex;
-  flex-flow: column;
-}
-.depot-container .depot-box .depot-boxbody .list-left span {
-  display: block;
-  margin-top: 15px;
-}
-.depot-container .depot-box .depot-boxbody .list-left .depot-search {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  margin-top: 16px;
-}
-.depot-container .depot-box .depot-boxbody .list-left .depot-search input {
-  width: 288px;
-  height: 48px;
-}
-.depot-container .depot-box .depot-boxbody .list-left .depot-search button {
-  width: 48px;
-  height: 48px;
-  padding: 0;
-}
-.depot-container .depot-box .depot-boxbody .list-left .list-vertical {
-  height: calc(100% - 143px);
-  width: 95%;
-  margin-top: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding-right: 5px;
-}
-.depot-container .depot-box .depot-boxbody .box-right {
-  height: 100%;
-  min-width: calc(100% - 440px);
-  max-width: calc(100% - 92px);
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #bbbcbc;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot {
-  width: calc(100% - 92px);
-  height: calc(100% - 32px);
-  margin: 16px;
-  background-color: #fff;
-  padding: 0 30px 0 30px;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header {
-  width: 100%;
-  height: 63px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 2px solid #f1f1f1;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header button {
-  width: 48px;
-  height: 48px;
-  padding: 0;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header span {
-  margin: 0 30px 0 30px;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-section {
-  display: flex;
-  align-items: center;
-  margin-top: 111px;
-  overflow-x: auto;
-  padding-bottom: 30px;
-  overflow-y: hidden;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container {
-  height: calc(100% - 439px);
-  width: calc(100% - 223px);
-  display: flex;
-  align-items: center;
-  flex-flow: row;
-  flex-wrap: nowrap;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .square {
-  display: flex;
-  flex-grow: 0;
-  height: 24px;
-  width: 24px;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .empty {
-  height: 20px;
-  width: 20px;
-  border: solid 2px #002680;
-  background-color: white;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .full {
-  background-color: #002680;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected-full {
-  background-color: #1791ff;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected-empty {
-  height: 20px;
-  width: 20px;
-  border: solid 2px #1791ff;
-}
-.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .linesquare {
-  display: flex;
-  height: 2px;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #002680;
-}
-.depot-container .depot-box .footer {
-  height: 80px;
-  float: right;
-  display: flex;
-  align-items: center;
-}
-.depot-container .depot-box .footer button.blue-reverse {
-  background-image: linear-gradient(to bottom, #1756ad, #002680);
-  color: #fff;
-  font-size: 18px;
-  font-weight: 600;
-}
-.summary-depot-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.summary-depot-container .summary-depot-box {
-  width: 896px;
-  height: 800px;
-  background-color: #fff;
-  border-radius: 2px;
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
-}
-.summary-depot-container .summary-depot-box .summary-header-depot {
-  width: 100%;
-  height: 60px;
-  color: #002680;
-  border-bottom: solid 2px #bbbcbc;
-}
-.summary-depot-container .summary-depot-box .summary-header-depot .summary-depot-header-label {
-  font-size: 20px;
-  padding: 19px 0 17px 23px;
-}
-.summary-depot-container .summary-depot-box .summary-header-depot > .fa {
-  float: right;
-  font-size: 24px;
-  margin-top: 19px;
-  margin-right: 18px;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot {
-  width: 100%;
-  height: calc(100% - 202px);
-  display: flex;
-  flex-flow: column;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .summary-body-depot-header {
-  height: 78px;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .summary-body-depot-header .summary-depot-body-label {
-  display: flex;
-  margin-right: auto;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  margin: 25px 68px 33px 24px;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box {
-  width: 752px;
-  height: 472px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  margin-bottom: 48px;
-  overflow-y: auto;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-header {
-  height: 63px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.11;
-  color: #4b4b4b;
-  border-bottom: solid 2px #dddddd;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body {
-  height: calc(100% - 65px);
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_up,
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_down {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_up {
-  margin-top: 23px;
-  margin-bottom: 12px;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_down {
-  margin-top: 33px;
-  margin-bottom: 11px;
-}
-.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .load-equipment:not(:last-child) {
-  margin-bottom: 8px;
-}
-.summary-depot-container .summary-depot-box .summary-footer-depot {
-  height: 138px;
-  display: flex;
-  flex-flow: column;
-  border-top: solid 2px #bbbcbc;
-}
-.summary-depot-container .summary-depot-box .summary-footer-depot .summary-depot-footer-label {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  justify-content: center;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  margin: 22px 68px 4px 24px;
-}
-.summary-depot-container .summary-depot-box .summary-footer-depot .group-button {
-  display: flex;
-  margin-left: auto;
-}
-.summary-depot-container .summary-depot-box .summary-footer-depot .group-button .blue-reverse {
-  background-image: linear-gradient(to bottom, #1756ad, #002680);
-  color: #fff;
-  font-size: 18px;
-  font-weight: 600;
-}
-.assisted-tooling-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.assisted-tooling-container .assisted-tooling-box {
-  width: 704px;
-  height: 624px;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header {
-  width: 100%;
-  height: 60px;
-  color: #002680;
-  border-bottom: solid 2px #bbbcbc;
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header .assisted-tooling-header-label {
-  font-size: 20px;
-  padding: 19px 0 0 24px;
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header > .fa {
-  float: right;
-  font-size: 28px;
-  margin-top: 15px;
-  margin-right: 14px;
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body {
-  width: 100%;
-  height: calc(100% - 142px);
-  background-color: #657178;
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body .assisted-tooling-body-group {
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #fff;
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body .assisted-tooling-body-group img {
-  margin-top: 10px;
-}
-.assisted-tooling-container .assisted-tooling-box .assisted-tooling-footer {
-  height: 78px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border-top: solid 2px #bbbcbc;
-}
-.tooling-equipment-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding-top: 104px;
-}
-.tooling-equipment-container .tooling-equipment-box {
-  width: 1808px;
-  height: 872px;
-  border-radius: 2px;
-  background-color: #fff;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-header {
-  font-size: 20px;
-  color: #002680;
-  height: 81px;
-  display: flex;
-  align-items: center;
-  border-bottom: solid 2px #f1f1f1;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-header .fa {
-  height: 18px;
-  width: 13px;
-  margin: 0 22px 0 29px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body {
-  width: 100%;
-  height: calc(100% - 161px);
-  border-radius: 2px;
-  background-color: #bbbcbc;
-  display: flex;
-  flex-flow: row;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left {
-  height: 100%;
-  width: 488px;
-  float: left;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-color: #fff;
-  font-size: 18px;
-  line-height: 1.11;
-  text-align: center;
-  color: #4b4b4b;
-  display: flex;
-  flex-flow: column;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search {
-  height: 135px;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  padding-bottom: 16px;
-  border-bottom: solid 2px #979797;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .tooling-equipment-search-label {
-  display: flex;
-  justify-content: center;
-  margin-top: 25px;
-  margin-bottom: 26px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .group-btn {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .group-btn input {
-  width: 288px;
-  height: 48px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .group-btn button {
-  width: 48px;
-  height: 48px;
-  padding: 0;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-vertical {
-  width: 95%;
-  height: calc(100% - 198px);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  overflow-y: auto;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-left-footer {
-  height: calc(100% - 646px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: solid 2px #979797;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-left-footer button {
-  background-image: linear-gradient(to bottom, #1756ad, #002680);
-  color: #fff;
-  width: 48px;
-  height: 47px;
-  margin: 28px;
-  padding: 0;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-left-footer button .fa {
-  width: 22px;
-  height: 21px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right {
-  width: 1320px;
-  height: 100%;
-  background-color: #f3f3f3;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right button {
-  float: right;
-  width: 48px;
-  height: 48px;
-  padding: 0;
-  margin-top: 15px;
-  margin-right: 16px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right button .fa {
-  width: 21px;
-  height: 22px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .box-right-label-header {
-  display: flex;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.11;
-  color: #4b4b4b;
-  margin-top: 47px;
-  margin-bottom: 36px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment {
-  width: 99%;
-  height: calc(100% - 102px);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  overflow-y: auto;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment div.skill-equipment {
-  margin: 8px;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer {
-  height: 80px;
-  float: right;
-  display: flex;
-  align-items: center;
-}
-.tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer button.blue-reverse {
-  background-image: linear-gradient(to bottom, #1756ad, #002680);
-  color: #fff;
-  font-size: 18px;
-  font-weight: 600;
-}
 .persona {
   height: 88px;
   width: 88px;
diff --git a/Step/wwwroot/src/services/hub.ts b/Step/wwwroot/src/services/hub.ts
index 0a4089b0..c5889682 100644
--- a/Step/wwwroot/src/services/hub.ts
+++ b/Step/wwwroot/src/services/hub.ts
@@ -28,6 +28,7 @@ function recalcArrayId(prefix: string, alarms: Array<signalr_alarms.genericAlarm
 export class Hub {
 
   static _ncConnectionNotificationVisible?: boolean = false;
+  static _serverConnectionNotificationVisible?: boolean = false;
 
 
   // singleton hub implementation
@@ -76,6 +77,20 @@ export class Hub {
     if (typeof cmsClient != "undefined")
       $.connection.hub.qs.CmsClientId = cmsClient.getClientID;
 
+
+    $.connection.hub.disconnected(() => {
+      Hub.manageServerStatus("disconnected");
+      console.log("SERVER CONNECTION: restart-connection")
+      setTimeout(function() {
+        $.connection.hub.start();
+      }, 5000); // Restart connection after 5 seconds.
+    });
+    $.connection.hub.stateChanged((state) =>{
+      if(state.newState == $.signalR.connectionState.connected)
+      {
+        Hub.manageServerStatus("connected");
+      }
+    });
     $.connection.hub.start();
 
     this.checkShowAxes();
@@ -86,7 +101,7 @@ export class Hub {
       appModelActions.CheckLogoff(store, e.id);
   }
 
-  private static axesNamesDataChanged(data){
+  private static axesNamesDataChanged(data) {
     processModelActions.setAxes(store, data);
   }
 
@@ -159,6 +174,26 @@ export class Hub {
     }
   }
 
+  private static manageServerStatus(status) {
+    console.log("Server Connection: ", status);
+
+    if (status == "disconnected" && !Hub._serverConnectionNotificationVisible) {
+      iziToast.warning({
+        id: "serverConnection", timeout: false, toastOnce: true, theme: "dark", title: "server offline", close: false, closeOnEscape: false, drag: false
+      } as IziToastSettings);
+      Hub._serverConnectionNotificationVisible = true;
+      alarmsModelActions.removeAllAlarms(store);
+      processModelActions.isRunning(store, false);
+      Factory.Get(MessageService).publishToChannel("force-ui-update", null);
+    }
+    if (status == "connected" && Hub._serverConnectionNotificationVisible) {
+      var toast = document.querySelector('#serverConnection') as any;
+      (iziToast as any).hide(toast);
+      Hub._serverConnectionNotificationVisible = false;
+      Factory.Get(MessageService).publishToChannel("force-ui-update", null);
+    }
+  }
+
   private static manageNcStatus(status) {
 
     if (Hub._ncConnectionNotificationVisible && status.connected) {
@@ -290,11 +325,11 @@ export class Hub {
     this._hub.server.addOverride(id);
   }
 
-  public selectProcess(id:number){
+  public selectProcess(id: number) {
     this._hub.server.selectProcess(id);
   }
 
-  public selectAxis(id:number){
+  public selectAxis(id: number) {
     this._hub.server.selectAxis(id);
   }
 

From 4ef3a592f67f40f304696e97e2f38c43219e9a6b Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Fri, 6 Apr 2018 11:23:42 +0200
Subject: [PATCH 02/26] fix heads

---
 Step/wwwroot/assets/styles/base/layout.less |  12 +-
 Step/wwwroot/assets/styles/style.css        | 801 ++++++++++++++++++++
 Step/wwwroot/src/modules/heads/head.vue     |   4 +-
 3 files changed, 809 insertions(+), 8 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/layout.less b/Step/wwwroot/assets/styles/base/layout.less
index 32fa3da7..8df1b0cf 100644
--- a/Step/wwwroot/assets/styles/base/layout.less
+++ b/Step/wwwroot/assets/styles/base/layout.less
@@ -16,12 +16,12 @@
 @import "back-view.less";
 @import "head.less";
 
-// @import "tooling.less";
-// @import "card.less";
-// @import "depot.less";
-// @import "summary-depot.less";
-// @import "assisted-tooling.less";
-// @import "tooling-equipment.less";
+@import "tooling.less";
+@import "card.less";
+@import "depot.less";
+@import "summary-depot.less";
+@import "assisted-tooling.less";
+@import "tooling-equipment.less";
 
 
 @background-color: rgb(216, 216, 216);
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index f1a7e112..ae5551ac 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2480,6 +2480,807 @@ footer .container button.big:before {
 .heads-container-lt4 {
   right: -12px;
 }
+.test-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tooling-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tooling-container .tooling-box {
+  width: 1504px;
+  height: 759px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.tooling-container .tooling-box .header {
+  font-size: 24px;
+  font-weight: 600;
+  color: #002680;
+  margin-top: 18px;
+  margin-left: 24px;
+  margin-bottom: 19px;
+}
+.tooling-container .tooling-box .tooling-boxbody {
+  width: calc(100% - 160px);
+  height: calc(100% - 65px);
+  top: 65px;
+  background-color: #bbbcbc;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-flow: column;
+  padding: 0 80px;
+}
+.tooling-container .tooling-box .tooling-boxbody .list-top,
+.tooling-container .tooling-box .tooling-boxbody .list-bottom {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 90%;
+  margin-bottom: 10px;
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+.tool {
+  width: 360px;
+  height: 64px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-flow: row;
+  align-self: center;
+  justify-items: center;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 4px;
+}
+.tool .image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 21px;
+  margin-right: 29px;
+}
+.tool .image img {
+  width: 48px;
+  height: 48px;
+}
+.tool .text-body {
+  text-align: left;
+  width: 145px;
+  margin-top: 11px;
+}
+.tool .text-right {
+  display: flex;
+  align-items: center;
+  color: #1791ff;
+}
+.tool .fa {
+  display: flex;
+  align-items: center;
+  font-size: 24px;
+  margin-left: 20px;
+  color: #002680;
+}
+.card {
+  width: 288px;
+  height: 216px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin: 8px;
+}
+.card > header {
+  width: 288px;
+  height: 64px;
+  border-radius: 2px;
+  background-color: #f1f1f1;
+}
+.card > header span {
+  font-size: 18px;
+  float: left;
+  color: #002680;
+  margin-top: 22px;
+  margin-left: 24px;
+}
+.card > header button {
+  float: right;
+  margin: 8px 8px 8px;
+  width: 48px;
+  height: 48px;
+  color: #002680;
+  padding: 0;
+}
+.card > header button .fa {
+  height: 22px;
+  font-size: 24px;
+  width: 25px;
+}
+.card > section {
+  height: calc(100% - 64px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.detail-card {
+  width: 288px;
+  height: 216px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-right: 32px;
+}
+.detail-card header {
+  width: 288px;
+  height: 64px;
+  border-radius: 2px;
+  background-color: #f1f1f1;
+  border-bottom: 2px solid #fff;
+}
+.detail-card header .title {
+  width: 64px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  float: left;
+  color: #4b4b4b;
+  border-right: 2px solid #fff;
+}
+.detail-card header button {
+  float: right;
+  margin: 8px 8px 8px;
+  width: 48px;
+  height: 48px;
+  color: #002680;
+  padding: 0;
+}
+.detail-card header button .fa {
+  height: 22px;
+  font-size: 24px;
+  width: 25px;
+}
+.detail-card section {
+  height: calc(100% - 66px);
+  display: flex;
+  background-color: #f1f1f1;
+}
+.detail-card section slot {
+  text-align: center;
+}
+.equipment {
+  width: 360px;
+  height: 64px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-flow: row;
+  align-self: center;
+  justify-items: center;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 4px;
+}
+.equipment .image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 16px 14px 16px 16px;
+}
+.equipment .image img {
+  width: 48px;
+  height: 48px;
+}
+.equipment .text-body {
+  text-align: left;
+  width: 145px;
+  margin-top: 11px;
+}
+.skill-equipment {
+  width: 656px;
+  height: 80px;
+  border-radius: 2px;
+  display: flex;
+  flex-flow: row;
+  background-color: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
+}
+.skill-equipment .skill-equipment-title {
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 15px;
+}
+.skill-equipment .skill-equipment-control {
+  height: 100%;
+  display: flex;
+  margin-right: 16px;
+  align-items: center;
+  margin-left: auto;
+}
+.skill-equipment .skill-equipment-control input,
+.skill-equipment .skill-equipment-control select {
+  width: 304px;
+  height: 48px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.load-equipment {
+  width: 495px;
+  height: 64px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-flow: row;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.load-equipment .image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 16px;
+  margin-right: 15px;
+}
+.load-equipment .text-body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.load-equipment .arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: 20px;
+}
+.load-equipment .arrow .fa-arrow-up,
+.load-equipment .arrow .fa-arrow-down {
+  font-size: 24px;
+}
+.load-equipment .arrow .fa-arrow-up {
+  color: #54AEFF;
+}
+.load-equipment .arrow .fa-arrow-down {
+  color: #DC4557;
+}
+.depot-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  /* align-items: center; */
+  justify-content: center;
+  padding-top: 104px;
+}
+.depot-container .depot-box {
+  width: 1808px;
+  height: 872px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.depot-container .depot-box .header {
+  font-size: 20px;
+  color: #002680;
+  height: 81px;
+  display: flex;
+  align-items: center;
+}
+.depot-container .depot-box .header .fa {
+  height: 18px;
+  width: 13px;
+  margin: 0 22px 0 29px;
+}
+.depot-container .depot-box .depot-boxbody {
+  width: 100%;
+  height: calc(100% - 161px);
+  border-radius: 2px;
+  background-color: #bbbcbc;
+  display: flex;
+  flex-flow: row;
+}
+.depot-container .depot-box .depot-boxbody .list-left {
+  height: 100%;
+  width: 440px;
+  float: left;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-color: #fff;
+  font-size: 18px;
+  line-height: 1.11;
+  text-align: center;
+  color: #4b4b4b;
+  display: flex;
+  flex-flow: column;
+}
+.depot-container .depot-box .depot-boxbody .list-left span {
+  display: block;
+  margin-top: 15px;
+}
+.depot-container .depot-box .depot-boxbody .list-left .depot-search {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  margin-top: 16px;
+}
+.depot-container .depot-box .depot-boxbody .list-left .depot-search input {
+  width: 288px;
+  height: 48px;
+}
+.depot-container .depot-box .depot-boxbody .list-left .depot-search button {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+.depot-container .depot-box .depot-boxbody .list-left .list-vertical {
+  height: calc(100% - 143px);
+  width: 95%;
+  margin-top: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding-right: 5px;
+}
+.depot-container .depot-box .depot-boxbody .box-right {
+  height: 100%;
+  min-width: calc(100% - 440px);
+  max-width: calc(100% - 92px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #bbbcbc;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot {
+  width: calc(100% - 92px);
+  height: calc(100% - 32px);
+  margin: 16px;
+  background-color: #fff;
+  padding: 0 30px 0 30px;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header {
+  width: 100%;
+  height: 63px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 2px solid #f1f1f1;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header button {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-header span {
+  margin: 0 30px 0 30px;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .sd-section {
+  display: flex;
+  align-items: center;
+  margin-top: 111px;
+  overflow-x: auto;
+  padding-bottom: 30px;
+  overflow-y: hidden;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container {
+  height: calc(100% - 439px);
+  width: calc(100% - 223px);
+  display: flex;
+  align-items: center;
+  flex-flow: row;
+  flex-wrap: nowrap;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .square {
+  display: flex;
+  flex-grow: 0;
+  height: 24px;
+  width: 24px;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .empty {
+  height: 20px;
+  width: 20px;
+  border: solid 2px #002680;
+  background-color: white;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .full {
+  background-color: #002680;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected-full {
+  background-color: #1791ff;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .selected-empty {
+  height: 20px;
+  width: 20px;
+  border: solid 2px #1791ff;
+}
+.depot-container .depot-box .depot-boxbody .box-right .single-depot .square-container .linesquare {
+  display: flex;
+  height: 2px;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #002680;
+}
+.depot-container .depot-box .footer {
+  height: 80px;
+  float: right;
+  display: flex;
+  align-items: center;
+}
+.depot-container .depot-box .footer button.blue-reverse {
+  background-image: linear-gradient(to bottom, #1756ad, #002680);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+}
+.summary-depot-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.summary-depot-container .summary-depot-box {
+  width: 896px;
+  height: 800px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.summary-depot-container .summary-depot-box .summary-header-depot {
+  width: 100%;
+  height: 60px;
+  color: #002680;
+  border-bottom: solid 2px #bbbcbc;
+}
+.summary-depot-container .summary-depot-box .summary-header-depot .summary-depot-header-label {
+  font-size: 20px;
+  padding: 19px 0 17px 23px;
+}
+.summary-depot-container .summary-depot-box .summary-header-depot > .fa {
+  float: right;
+  font-size: 24px;
+  margin-top: 19px;
+  margin-right: 18px;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot {
+  width: 100%;
+  height: calc(100% - 202px);
+  display: flex;
+  flex-flow: column;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .summary-body-depot-header {
+  height: 78px;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .summary-body-depot-header .summary-depot-body-label {
+  display: flex;
+  margin-right: auto;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin: 25px 68px 33px 24px;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box {
+  width: 752px;
+  height: 472px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-bottom: 48px;
+  overflow-y: auto;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-header {
+  height: 63px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.11;
+  color: #4b4b4b;
+  border-bottom: solid 2px #dddddd;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body {
+  height: calc(100% - 65px);
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_up,
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_down {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_up {
+  margin-top: 23px;
+  margin-bottom: 12px;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .title_down {
+  margin-top: 33px;
+  margin-bottom: 11px;
+}
+.summary-depot-container .summary-depot-box .summary-body-depot .list-vertical .list-vertical-box .list-vertical-body .load-equipment:not(:last-child) {
+  margin-bottom: 8px;
+}
+.summary-depot-container .summary-depot-box .summary-footer-depot {
+  height: 138px;
+  display: flex;
+  flex-flow: column;
+  border-top: solid 2px #bbbcbc;
+}
+.summary-depot-container .summary-depot-box .summary-footer-depot .summary-depot-footer-label {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin: 22px 68px 4px 24px;
+}
+.summary-depot-container .summary-depot-box .summary-footer-depot .group-button {
+  display: flex;
+  margin-left: auto;
+}
+.summary-depot-container .summary-depot-box .summary-footer-depot .group-button .blue-reverse {
+  background-image: linear-gradient(to bottom, #1756ad, #002680);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+}
+.assisted-tooling-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.assisted-tooling-container .assisted-tooling-box {
+  width: 704px;
+  height: 624px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header {
+  width: 100%;
+  height: 60px;
+  color: #002680;
+  border-bottom: solid 2px #bbbcbc;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header .assisted-tooling-header-label {
+  font-size: 20px;
+  padding: 19px 0 0 24px;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-header > .fa {
+  float: right;
+  font-size: 28px;
+  margin-top: 15px;
+  margin-right: 14px;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body {
+  width: 100%;
+  height: calc(100% - 142px);
+  background-color: #657178;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body .assisted-tooling-body-group {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #fff;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-body .assisted-tooling-body-group img {
+  margin-top: 10px;
+}
+.assisted-tooling-container .assisted-tooling-box .assisted-tooling-footer {
+  height: 78px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-top: solid 2px #bbbcbc;
+}
+.tooling-equipment-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-top: 104px;
+}
+.tooling-equipment-container .tooling-equipment-box {
+  width: 1808px;
+  height: 872px;
+  border-radius: 2px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-header {
+  font-size: 20px;
+  color: #002680;
+  height: 81px;
+  display: flex;
+  align-items: center;
+  border-bottom: solid 2px #f1f1f1;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-header .fa {
+  height: 18px;
+  width: 13px;
+  margin: 0 22px 0 29px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body {
+  width: 100%;
+  height: calc(100% - 161px);
+  border-radius: 2px;
+  background-color: #bbbcbc;
+  display: flex;
+  flex-flow: row;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left {
+  height: 100%;
+  width: 488px;
+  float: left;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-color: #fff;
+  font-size: 18px;
+  line-height: 1.11;
+  text-align: center;
+  color: #4b4b4b;
+  display: flex;
+  flex-flow: column;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search {
+  height: 135px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding-bottom: 16px;
+  border-bottom: solid 2px #979797;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .tooling-equipment-search-label {
+  display: flex;
+  justify-content: center;
+  margin-top: 25px;
+  margin-bottom: 26px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .group-btn {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .group-btn input {
+  width: 288px;
+  height: 48px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .tooling-equipment-search .group-btn button {
+  width: 48px;
+  height: 48px;
+  padding: 0;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-vertical {
+  width: 95%;
+  height: calc(100% - 198px);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  overflow-y: auto;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-left-footer {
+  height: calc(100% - 646px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: solid 2px #979797;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-left-footer button {
+  background-image: linear-gradient(to bottom, #1756ad, #002680);
+  color: #fff;
+  width: 48px;
+  height: 47px;
+  margin: 28px;
+  padding: 0;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .list-left .list-left-footer button .fa {
+  width: 22px;
+  height: 21px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right {
+  width: 1320px;
+  height: 100%;
+  background-color: #f3f3f3;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right button {
+  float: right;
+  width: 48px;
+  height: 48px;
+  padding: 0;
+  margin-top: 15px;
+  margin-right: 16px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right button .fa {
+  width: 21px;
+  height: 22px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .box-right-label-header {
+  display: flex;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-top: 47px;
+  margin-bottom: 36px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment {
+  width: 99%;
+  height: calc(100% - 102px);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-body .box-right .list-skill-equipment div.skill-equipment {
+  margin: 8px;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer {
+  height: 80px;
+  float: right;
+  display: flex;
+  align-items: center;
+}
+.tooling-equipment-container .tooling-equipment-box .tooling-equipment-footer button.blue-reverse {
+  background-image: linear-gradient(to bottom, #1756ad, #002680);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+}
 .persona {
   height: 88px;
   width: 88px;
diff --git a/Step/wwwroot/src/modules/heads/head.vue b/Step/wwwroot/src/modules/heads/head.vue
index 5141e288..ce335472 100644
--- a/Step/wwwroot/src/modules/heads/head.vue
+++ b/Step/wwwroot/src/modules/heads/head.vue
@@ -54,10 +54,10 @@
     </aside>
 
      <aside v-if="type == 'WJ' ">
-      <div class="tool">
+      <div class="tool-box">
 
       </div>
-      <div class="load">
+      <div class="load-box">
 
       </div>
     </aside>

From 5b556e2363cca5223ae915c664303e79706abbc8 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Fri, 6 Apr 2018 16:37:49 +0200
Subject: [PATCH 03/26] Fix Hmi-Nc Name (under the hood)

---
 Step/wwwroot/src/components/under-the-hood.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Step/wwwroot/src/components/under-the-hood.vue b/Step/wwwroot/src/components/under-the-hood.vue
index 094b1ee3..82325aaf 100644
--- a/Step/wwwroot/src/components/under-the-hood.vue
+++ b/Step/wwwroot/src/components/under-the-hood.vue
@@ -1,18 +1,19 @@
 <template>
   <div id="back-view">
-    <header>
-      <span>Siemens HMI</span>
+    <header>      
+      <span v-if="isSiemens">Siemens HMI</span>
+      <span v-if="isFanuc">Fanuc HMI</span>
+      <span v-if="isOsai">Osai HMI</span>
+      <span v-if="isDemo">Demo HMI</span>
       <button class="close" @click="toggleMainView()">&times;</button>
     </header>
     <div class="hmi-container">
       <process-selection></process-selection>
       <div id="nc-hmi">
-
         <img id="nc-hmi-img" src="assets/images/Siemens_Placeholder.jpg" v-if="isSiemens">
         <img id="nc-hmi-img-fanuc" src="assets/images/Fanuc_Placeholder.jpg" v-if="isFanuc">
         <img id="nc-hmi-img" src="assets/images/Osai_Placeholder.jpg" v-if="isOsai">
         <img id="nc-hmi-img" src="assets/images/Demo_Placeholder.jpg" v-if="isDemo">
-
       </div >
       </div>
       <div class="keys-area">

From afe40a766cbf926608c083a89ce8f6ed2241b616 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 9 Apr 2018 08:35:16 +0200
Subject: [PATCH 04/26] Fix JogMenu Show + Plc-Softkey category languages

---
 Step.Utils/languages/IT.xml                   | 22 ++++++++++++++++++-
 .../wwwroot/src/components/under-the-hood.vue |  4 ++--
 Step/wwwroot/src/modules/plc-softkeys.vue     |  2 +-
 .../src/modules/under-the-hood/jog-menu.vue   |  2 --
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/Step.Utils/languages/IT.xml b/Step.Utils/languages/IT.xml
index 34a1f4b2..b08cd07a 100644
--- a/Step.Utils/languages/IT.xml
+++ b/Step.Utils/languages/IT.xml
@@ -40,5 +40,25 @@
   <machineinfo_umeas>Unità di misura Cn:</machineinfo_umeas>
   <machineinfo_server_cms_version>Versione Server Step:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Versione Core Step:</machineinfo_core_cms_version>
-  <machineinfo_client_version>Versione Client Step:</machineinfo_client_version>  
+  <machineinfo_client_version>Versione Client Step:</machineinfo_client_version> 
+  
+  <head_label_rpm>Rpm</head_label_rpm> 
+  <head_label_tool>Utensile</head_label_tool> 
+  <head_label_load>Carico</head_label_load> 
+  <head_label_pressure>MPa</head_label_pressure> 
+  <head_label_abrasive>Abrasivo</head_label_abrasive> 
+  <head_label_gmin>g/min</head_label_gmin> 
+  <head_label_vacuum>Vuoto</head_label_vacuum> 
+  <head_label_bar>bar</head_label_bar>   
+  <sfk_category_1>1. Softkey Generiche</sfk_category_1>
+  <sfk_category_2>2. Bloccaggi / zone vuoto</sfk_category_2>
+  <sfk_category_3>3. Aggregati / Dispositivi di raffreddamento</sfk_category_3>
+  <sfk_category_4>4. Modalità di lavoro</sfk_category_4>
+  <sfk_category_5>5. Carico / Scarico</sfk_category_5>
+  <sfk_category_6>6. Lancio procedure / Programmi utente</sfk_category_6>
+  <sfk_category_7>7. Attrezzaggio e protezioni</sfk_category_7>
+  
+  <softkey_confirm>Sei sicuro?</softkey_confirm>
+  <confirm_request_confirm>Conferma</confirm_request_confirm>
+  <confirm_request_cancel>Annulla</confirm_request_cancel> 
 </root>
\ No newline at end of file
diff --git a/Step/wwwroot/src/components/under-the-hood.vue b/Step/wwwroot/src/components/under-the-hood.vue
index 82325aaf..1e1a3fcd 100644
--- a/Step/wwwroot/src/components/under-the-hood.vue
+++ b/Step/wwwroot/src/components/under-the-hood.vue
@@ -64,16 +64,16 @@ export default {
       );
     },
     showJog: function() {
+      let ref = this.$store.getters.getNcSoftKeyStatus(5);
       let jog = this.$store.getters.getNcSoftKeyStatus(6);
       let joginc = this.$store.getters.getNcSoftKeyStatus(7);
-      return ((jog && jog.Value) || (joginc && joginc.Value));
+      return ((ref && ref.Value) || (jog && jog.Value) || (joginc && joginc.Value));
       return false;
     },
     showAuto: function(){
       let auto = this.$store.getters.getNcSoftKeyStatus(1);
       let mdi = this.$store.getters.getNcSoftKeyStatus(2);
       let edit = this.$store.getters.getNcSoftKeyStatus(3);
-
       return ((auto && auto.Value) || (mdi && mdi.Value) || (edit && edit.Value));
       return false;
     }
diff --git a/Step/wwwroot/src/modules/plc-softkeys.vue b/Step/wwwroot/src/modules/plc-softkeys.vue
index 9ac46d3b..c0a9df6f 100644
--- a/Step/wwwroot/src/modules/plc-softkeys.vue
+++ b/Step/wwwroot/src/modules/plc-softkeys.vue
@@ -10,7 +10,7 @@
       <button v-if="isSectionVisible(6)" :class="{active:selectedSection==6}" @click="selectSection(6)"><span class="number">6.</span><img src="assets/icons/under-hood-png/cat-6.png"></button>
       <button v-if="isSectionVisible(7)" :class="{active:selectedSection==7}" @click="selectSection(7)"><span class="number">7.</span></button>
     </header>
-    <div class="title" >{{'maint_' + selectedSection | localize('maint_' + selectedSection) }}</div>
+    <div class="title" >{{'sfk_category_' + selectedSection | localize('sfk_category_' + selectedSection) }}</div>
     <section class="scrollable" ref="scrollable">
       <div v-for="(b, index) in sectionButtons(selectedSection)" :key="b.id">
       <group-soft-key
diff --git a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
index 048c049f..8aa1ef18 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -94,8 +94,6 @@ export default {
       this.showAxesMenu = !this.showAxesMenu;
     },
     toggleIncr() {
-      console.log(this.$refs);
-
       this.showAxesMenu = false;
       this.showIncrMenu = !this.showIncrMenu;
     },

From c340ee5eb2f8294655ae19d24a602a54ae3ef7fc Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 9 Apr 2018 09:43:25 +0200
Subject: [PATCH 05/26] Fix Procedure Softkeys Style

---
 Step/wwwroot/assets/styles/base/plc-softkeys.less | 7 +++----
 Step/wwwroot/assets/styles/style.css              | 5 +----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/plc-softkeys.less b/Step/wwwroot/assets/styles/base/plc-softkeys.less
index 76b8c40c..f42811c8 100644
--- a/Step/wwwroot/assets/styles/base/plc-softkeys.less
+++ b/Step/wwwroot/assets/styles/base/plc-softkeys.less
@@ -188,8 +188,7 @@
     box-sizing: border-box;
     background-color: @color-bluish-grey;
     -webkit-tap-highlight-color: transparent;
-    &.command {
-        border: solid 3px @color-bluish-grey;
+    &.command {        
     }
     .menu-container {
         width: 360px;
@@ -280,8 +279,8 @@
         border-bottom: 1px solid #fff;
         box-sizing: content-box;
     }
-    &.active {
-        border: solid 3px rgba(23, 145, 255, 1);
+    &.active {        
+        box-shadow: inset 0px 0px 0px 3px rgba(23, 145, 255, 1);
     }
     button.star {
         background: transparent;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index ae5551ac..9f1c5fe5 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -1636,9 +1636,6 @@ footer .container button.big:before {
 .soft-key.opened .detail section {
   height: 42px;
 }
-.soft-key.command {
-  border: solid 3px #808e96;
-}
 .soft-key .menu-container {
   width: 360px;
   top: 80px;
@@ -1726,7 +1723,7 @@ footer .container button.big:before {
   box-sizing: content-box;
 }
 .soft-key.active {
-  border: solid 3px #1791ff;
+  box-shadow: inset 0px 0px 0px 3px #1791ff;
 }
 .soft-key button.star {
   background: transparent;

From 3ab3ec134c375c1a03aa5f8f37d3f7751eb2205a Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 09:47:13 +0200
Subject: [PATCH 06/26] ncsoft keys

---
 Step/wwwroot/src/modules/nc-softkeys.vue | 63 +++++++++++++-----------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/Step/wwwroot/src/modules/nc-softkeys.vue b/Step/wwwroot/src/modules/nc-softkeys.vue
index 98ef6714..487b5beb 100644
--- a/Step/wwwroot/src/modules/nc-softkeys.vue
+++ b/Step/wwwroot/src/modules/nc-softkeys.vue
@@ -1,42 +1,42 @@
 <template>
 <div id="nc-softkeys-container">
   <div v-if="machineInfo.isFanuc  ">
-    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
-    <button @click="ncClick(2)" :disabled="!isKeyActive(2)" :class="{active:isKeySelected(2) , readonly:isReadOnly(2)}" class="soft icon"><img src="assets/icons/under-hood-png/edit-blue@2x.png">{{'nc_softkey_edit' |localize("Edit") }}</button>
-    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
-    <button @click="ncClick(4)" :disabled="!isKeyActive(4)" :class="{active:isKeySelected(4) , readonly:isReadOnly(4)}" class="soft icon"><img src="assets/icons/under-hood-png/dnc-blue@2x.png">{{'nc_softkey_dnc' |localize("DNC") }}</button>
-    <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9) , readonly:isReadOnly(9)}" class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{'nc_softkey_teach' |localize("Teach") }}</button>
-    <button @click="ncClick(8)" :disabled="!isKeyActive(8)" :class="{active:isKeySelected(8) , readonly:isReadOnly(8)}" class="soft icon"><img src="assets/icons/under-hood-png/restart-blue@2x.png">{{'nc_softkey_restart' |localize("Restart") }}</button>
-    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
-    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
-    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
-    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
-    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retract-blue@2x.png">{{'nc_softkey_retract' |localize("Retract") }}</button>
-    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{'nc_softkey_handle' |localize("Handle") }}</button>
+    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
+    <button @click="ncClick(2)" :disabled="!isKeyActive(2)" :class="{active:isKeySelected(2) , readonly:isReadOnly(2)}" class="soft icon"><img src="assets/icons/under-hood-png/edit-blue@2x.png">{{name(2)}}</button>
+    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
+    <button @click="ncClick(4)" :disabled="!isKeyActive(4)" :class="{active:isKeySelected(4) , readonly:isReadOnly(4)}" class="soft icon"><img src="assets/icons/under-hood-png/dnc-blue@2x.png">{{name(4)}}</button>
+    <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9) , readonly:isReadOnly(9)}" class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{name(9)}}</button>
+    <button @click="ncClick(8)" :disabled="!isKeyActive(8)" :class="{active:isKeySelected(8) , readonly:isReadOnly(8)}" class="soft icon"><img src="assets/icons/under-hood-png/restart-blue@2x.png">{{name(8)}}</button>
+    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{name(5)}}</button>
+    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{name(6)}}</button>
+    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{name(7)}}</button>
+    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{name(13)}}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retract-blue@2x.png">{{name(10)}}</button>
+    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{name(12)}}</button>
   </div>
   <div v-if="machineInfo.isSiemens">
-    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
-    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
+    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
+    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(11)" :disabled="!isKeyActive(11)" :class="{active:isKeySelected(11) , readonly:isReadOnly(11)}"  class="soft icon"><img src="assets/icons/under-hood-png/wcsmcs-blue@2x.png">{{'nc_softkey_wcsmcs' |localize("WcsMcs") }}</button>
-    <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9) , readonly:isReadOnly(9)}"  class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{'nc_softkey_teach' |localize("Teach") }}</button>
+    <button @click="ncClick(11)" :disabled="!isKeyActive(11)" :class="{active:isKeySelected(11) , readonly:isReadOnly(11)}"  class="soft icon"><img src="assets/icons/under-hood-png/wcsmcs-blue@2x.png">{{name(11)}}</button>
+    <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9) , readonly:isReadOnly(9)}"  class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{name(9)}}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
-    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
-    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
-    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
-    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos-blue@2x.png">{{'nc_softkey_repos' |localize("Repos") }}</button>
-    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{'nc_softkey_handle' |localize("Handle") }}</button>
+    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{name(5)}}</button>
+    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{name(6)}}</button>
+    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{name(7)}}</button>
+    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{name(13)}}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos-blue@2x.png">{{name(10)}}</button>
+    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{name(12)}}</button>
   </div>
   <div v-if="machineInfo.isOsai || isDemo" >
-    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{'nc_softkey_auto' |localize("Auto") }}</button>
-    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{'nc_softkey_mdi' |localize("MDI") }}</button>
+    <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
+    <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{'nc_softkey_ref' |localize("Ref") }}</button>
-    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{'nc_softkey_jog' |localize("Jog") }}</button>
-    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{'nc_softkey_joginc' |localize("Jog Inc") }}</button>
-    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{'nc_softkey_reset' |localize("Reset") }}</button>
-    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retrpof-blue@2x.png">{{'nc_softkey_retrpof' |localize("Retrpof") }}</button>
+    <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{name(1)}}</button>
+    <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{name(6)}}</button>
+    <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{name(7)}}</button>
+    <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{name(13)}}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retrpof-blue@2x.png">{{name(10)}}</button>
     <div class="empty-space"></div>
     <div class="empty-space"></div>
     <div class="empty-space"></div>
@@ -80,6 +80,11 @@ export default {
       let r = this.$store.getters.getNcSoftKeyStatus(id);
       if (r) return r.Value;
       return false;
+    },
+    name(id){
+      let r = this.$store.getters.getNcSoftKeyInfo(id);
+      if(r) return r.visualizedName;
+      return null;
     }
   }
 };

From ac934a8616a3c4289e9a675c902326410f38457f Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 09:55:43 +0200
Subject: [PATCH 07/26] alarm_id

---
 Step/wwwroot/assets/styles/base/head.less        | 4 ++--
 Step/wwwroot/assets/styles/style.css             | 2 --
 Step/wwwroot/src/modules/alarms/alarm-detail.vue | 2 +-
 Step/wwwroot/src/modules/alarms/alarm-item.vue   | 4 ++--
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/head.less b/Step/wwwroot/assets/styles/base/head.less
index 5820c10d..13768b30 100644
--- a/Step/wwwroot/assets/styles/base/head.less
+++ b/Step/wwwroot/assets/styles/base/head.less
@@ -90,7 +90,7 @@
             span {
                 text-align: center;
                 color: #4b4b4b;
-                text-transform: lowercase;
+                // text-transform: lowercase;
                 font-size: 14px;
                 display: flex;
                 flex-flow: column;
@@ -261,7 +261,7 @@
             span {
                 text-align: center;
                 color: #4b4b4b;
-                text-transform: lowercase;
+                // text-transform: lowercase;
                 font-size: 14px;
                 display: flex;
                 flex-flow: column;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 9f1c5fe5..bbe6e18e 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -2182,7 +2182,6 @@ footer .container button.big:before {
 .head-awj section div span {
   text-align: center;
   color: #4b4b4b;
-  text-transform: lowercase;
   font-size: 14px;
   display: flex;
   flex-flow: column;
@@ -2369,7 +2368,6 @@ footer .container button.big:before {
 .head-std section div span {
   text-align: center;
   color: #4b4b4b;
-  text-transform: lowercase;
   font-size: 14px;
   display: flex;
   flex-flow: column;
diff --git a/Step/wwwroot/src/modules/alarms/alarm-detail.vue b/Step/wwwroot/src/modules/alarms/alarm-detail.vue
index f4f8c4d9..b7d87e19 100644
--- a/Step/wwwroot/src/modules/alarms/alarm-detail.vue
+++ b/Step/wwwroot/src/modules/alarms/alarm-detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="alarm-detail content scrollable" :class="alarm.type">
     <h2 v-if="alarm.title">{{alarm.title}}</h2>
-    <h2 v-if="!alarm.title">{{'alarm_'+ alarm.id | localize("")}}</h2>
+    <h2 v-if="!alarm.title">{{'alarm_'+ alarm.id | localize('alarm_'+ alarm.id)}}</h2>
     <div class="sources" v-if="alarm.source">
       <span class="source">{{alarm.process}} {{alarm.source}}</span>
     </div>
diff --git a/Step/wwwroot/src/modules/alarms/alarm-item.vue b/Step/wwwroot/src/modules/alarms/alarm-item.vue
index f6d18919..f312bbd7 100644
--- a/Step/wwwroot/src/modules/alarms/alarm-item.vue
+++ b/Step/wwwroot/src/modules/alarms/alarm-item.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="alarm-item" :class="type">
     <div class="content">
-      <h2 v-if="title">{{title}}</h2>
-      <h2 v-if="!title">{{'alarm_'+ alarmid | localize("")}}</h2>
+      <h2 v-if="title.length>0">{{title}}</h2>
+      <h2 v-if="!title || title.length==0">{{'alarm_'+ alarmid | localize('alarm_'+ alarmid)}}</h2>
       <div class="summary">
         <span v-if="source">{{source}} {{processid}}</span>
 

From ad9f14a0c1581c4d6c392f7223548224ed2ec8cf Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 10:06:00 +0200
Subject: [PATCH 08/26] alarm ribbon

---
 Step/wwwroot/src/modules/app-header.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Step/wwwroot/src/modules/app-header.vue b/Step/wwwroot/src/modules/app-header.vue
index fec00553..ea3e17ea 100644
--- a/Step/wwwroot/src/modules/app-header.vue
+++ b/Step/wwwroot/src/modules/app-header.vue
@@ -9,7 +9,8 @@
        <i class="fa fa-exclamation" slot="icon" v-if="ribbonStatus >1"></i>
       <div slot="content" class="content" v-if="ribbonStatus>1">
         <strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
-        <strong v-if="showDetails">{{alarms[0].title}}</strong>
+        <strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
+        <strong v-if="showDetails && !alarms[0].title">{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
         <div class="processes" v-if="showDetails">
           <span>{{alarms[0].process}} {{alarms[0].source}}</span>
         </div>

From ac0c99a64141d69de96a83d956e51106dc23130f Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 9 Apr 2018 10:07:05 +0200
Subject: [PATCH 09/26] Fix Customization Plc-Softkey style

---
 Step/wwwroot/assets/styles/base/plc-softkeys.less | 5 ++++-
 Step/wwwroot/assets/styles/style.css              | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/Step/wwwroot/assets/styles/base/plc-softkeys.less b/Step/wwwroot/assets/styles/base/plc-softkeys.less
index f42811c8..efe5e6c5 100644
--- a/Step/wwwroot/assets/styles/base/plc-softkeys.less
+++ b/Step/wwwroot/assets/styles/base/plc-softkeys.less
@@ -277,7 +277,9 @@
         font-size: 14px;
         line-height: 21px;
         border-bottom: 1px solid #fff;
-        box-sizing: content-box;
+        box-sizing: content-box;        
+        white-space: nowrap;
+        overflow: hidden;
     }
     &.active {        
         box-shadow: inset 0px 0px 0px 3px rgba(23, 145, 255, 1);
@@ -318,6 +320,7 @@
             &.description {
                 cursor: pointer;
                 margin-top: 0;
+                overflow: hidden;
             }
             &.description:active {
                 background-color: #4e585e;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 9f1c5fe5..ab7407bd 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -1721,6 +1721,8 @@ footer .container button.big:before {
   line-height: 21px;
   border-bottom: 1px solid #fff;
   box-sizing: content-box;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .soft-key.active {
   box-shadow: inset 0px 0px 0px 3px #1791ff;
@@ -1761,6 +1763,7 @@ footer .container button.big:before {
 .soft-key .detail section.description {
   cursor: pointer;
   margin-top: 0;
+  overflow: hidden;
 }
 .soft-key .detail section.description:active {
   background-color: #4e585e;

From e64fd059ce70561437c3a8a2b0d49c7adebce104 Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 10:41:42 +0200
Subject: [PATCH 10/26] icone categoria 7

---
 Step.Config/Config/userSoftKeyConfig.xml         |   2 +-
 .../assets/icons/under-hood-png/CMS-icons-01.png | Bin 0 -> 1538 bytes
 .../assets/icons/under-hood-png/CMS-icons-02.png | Bin 0 -> 1234 bytes
 .../assets/icons/under-hood-png/CMS-icons-03.png | Bin 0 -> 2322 bytes
 .../assets/icons/under-hood-png/CMS-icons-04.png | Bin 0 -> 2933 bytes
 .../assets/icons/under-hood-png/CMS-icons-05.png | Bin 0 -> 1787 bytes
 .../wwwroot/assets/styles/base/plc-softkeys.less |  13 ++++++++++---
 Step/wwwroot/assets/styles/style.css             |   7 +++++++
 Step/wwwroot/src/modules/plc-softkeys.vue        |   7 ++++++-
 9 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/CMS-icons-01.png
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/CMS-icons-02.png
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/CMS-icons-03.png
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/CMS-icons-04.png
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/CMS-icons-05.png

diff --git a/Step.Config/Config/userSoftKeyConfig.xml b/Step.Config/Config/userSoftKeyConfig.xml
index 7789f8eb..3ef57249 100644
--- a/Step.Config/Config/userSoftKeyConfig.xml
+++ b/Step.Config/Config/userSoftKeyConfig.xml
@@ -414,7 +414,7 @@
   </softKey_toggle>  
   <softKey_group>
     <active>true</active>
-    <category>3</category>
+    <category>7</category>
     <operatorConfirmationNeeded>false</operatorConfirmationNeeded>
     <localizedNames>
       <lang langKey="en">Test</lang>
diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-01.png b/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..94d011385e2f5bf7c0fff2e7e94d15c4007c1413
GIT binary patch
literal 1538
zcmb7E{Wny382{eeoi&#*MwSY5Wt3H3Qba@Ucxz@Vl-DG~ilmpB-jrU<^;R4&gHG5=
zDs|XunYPxhyv%4SZCIpI6jK{1ZQV+mxQD&%IsF0q!}I$2JfHKN?{m&KCn#X0zU~}d
z0D!(w;Jc2FD%uF<ceLM_nXr`(s8q0iHvoFZUkw5$PMOio*?asV_5@23_Uwz@6%Y8E
zBtOPu!tJq}<JZN<Zc5qtXS@dh47t#kAF{viO?k`Oetg!Ejw8HRSk&%x1F6p089a+F
zzEtOYdYP`bU3L$&VyBCR1~&VZcXj6eqD5^bVUq)sQ$Ll*$oU0hhbNQcQ}&L1_~1P6
zW|DaWfdMNf&V*U%AoE-5_hsx;>!~IJlq})H2o7^`z{Tk#-5q9eolaENg=b8Z-x{i1
zzI&2#I=K#F9tRMUjRBgB2?&6oECPdQYS3}(u&n*7Ji1;s=T~qN0!7pENlWSR3gaNi
z^;v~BdAR?E*Hn9Sw-{x`7*F+LX-23yDI+-OOreHQvQxQE^U`Ka<zJ5TfvwqYnn6Nl
zK9_A)q=KgBQk{lZC%Xz&1&D!mP$N4Gqi+NnLS~%GRoKuoa?(1@f)<lByLu9WGaFzX
ziWAM_!#rB1_K^L5BC>y~S_CmT4Q+7D!r>trlE^?2E~h0w^XMrb8WO~;{~umxqG=4$
z7U2q{7-3@edRZJaQ-t{we}ruYuL94~OW|n9qJq(VVZ^8;Rx;Y4BRk#L>6EuYn_S$O
z?0)weR;xH^KHiKuZp|1k6`O?SiGm_*aDwu2=h_Oso}!11siwY|_6H6oT(L@XLd%d|
zwFMi~H|`1D7Pxnm8QP>X-B)QbaPVQy6@^gx&iL;*n<jNl;brUlmCUCH?^M*;7e9C@
zwY_^xL`I_b2WnmsBB$3P*yS_x(#Ye4cL$|Pb(p7Q`rh=%hV6_y8_`)IM8Lw9D-U<v
zcz0^F{iH|jZ2z^WZVht6^!8oP9O_Bhwbgk`0`pu@#kP^6-QmPRuB{ke1D{uC1n0mQ
zKN?+%D$FjzH_<o3aJpXcwH8^*m+as@eRv={_+qB6qC0rP(yG^K#4hDf@7mDydEYhe
z3W*qBZhz6A*nfI@ams|Vnp`k8B`&UdsS>ZC`t0z~PF{ziWAw%QN-r}#jUy*DA8ucG
zgx}P`cs|&i$bz+cS>kfA^Lc%H1f$08z_dHrMu_7W%zB|^;6&NXR^^vpatAotqiNy`
z;EGQ4K9@z0i}$2A4OD&BnR=$_jf7rb#Cth;`E%!MRAM)(j}fs<u(%qiygaBRMmBj~
zeLA=1FXpZHGTpbZHom2{9!5}a`ShcnD6Blh>#eRmSvo_R1SJv5kwk|=T?L$)LgpG{
zQP8XYr!}nBtIk_Y$_%UkS*oM7g`N*7p)=CAhr7=$P;Mz}OfE7Z+cLzF3??YQRS_5|
zC=3Ybbk5bIvTiu8A;u;q%DL6o9h65q5kibn=a6jPa54w==Y%J^jrE6Asp!|(c}z3I
zCXqo}DGe!SjiJ%+4ndFB#(I`@4|h04+nDtpGFiNOo#S=3N)k7d`tZy&95Sdz7T%^*
zwf;oGQ6H6L))edg){MIP!*-<URo6r#GPed?2!Riz){~c5F#?njyHZJrnK!H{HB{O`
zyF`Fmt_fd&8_<X$Wycr^hBdtmWh69F2(+JCY9k2;8<1K~UNSwSM^hZB`G}h@P0?4*
zhQ^C%idrHfT-iXWul2eA#I|8g-A3G07N#dNG*#zh4Ms5@U0`>8>`xoK4D@N1k#>!q
z!VlIggOw@J94<&5BCYWzL?r>KNOcL&=BqgOCYB~z4gO%G3S?j^IY6{V1n`1cnw0>i
zm^i_KnB=n77eieo!5`fVgxa6M&82jIwOURe`L||c7Wg`#d?5WkI|yR(fj5g_AsF&4
cZTjM<0vW5I;o>%YnEt<k&@aHZ#yckcUuI^Ak^lez

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-02.png b/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-02.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ee160a71a87764de365934721979d89616fb92a
GIT binary patch
literal 1234
zcmeAS@N?(olHy`uVBq!ia0vp^2Y|SNgAGW=wxnePDb50q$YKTtZeb8+WSBKa0w^e1
z;u=vBoS#-wo>-L1;Fyx1l&avFo0y&&l$w}QS$HzlhJk@4-qXb~q~g|_yXSL-9VOZd
z*>^az7d&-Y(NH1~%(#%riPcj}A*5lY!a^n=))~R;7BXun7#W|ES#(so;9o`gv){It
zP6g_?&c6A5=KI-^r+06S(NlK_k&|E&U{GLiU}#`qU}RuoU~zD^si`wC=3?nMBP}G*
zz@nnS!0F+@AasU<L5L+a`>ucUvV)&KUNrkzQ&_fTIg^8`0s~NbLIZ;WBclToQv(YN
z1Lv%y)7zbnJQDj}IBSpp0w#qLpdu%42Zoku4GbK*jEn+NOiT(}SXdk~IOTTMO)vR=
zT>o6(ww_Z_LOxl9G;lOr5E5Wmh}%Sx6bO70^fa&a3E+;OUeWEY(%WfW9W$A$;lfl5
zheC~2WQcm`_ML5&fWp*m>OV7{dM*9`bmksD`G2#t9NxWsrfG4Tx21kooY>3K_`G)B
zdQqk+3*Iby>^d<as_+N@<<p*4a?2k(b30v^`FD|f0@J3+%|%bcEiKelJxp2cw-+pb
zdA#{t^yg_&yKfze_vZdmee^wFP{Aq=|Cvw4mv)s}`m-~#an+}Nna`%neeCijrqZ7?
z`!c0^j(VK8jbHLOXy?CO9WQVAKmV6~`1ux*e_dJ*ztTVJ><nhQ{4_ID`J0=>Kbb%N
zwh!y)>pxm{IRDxD4NPky1nOT@{!W&f^H*@r<H<oA<GyYw-kEfk-DdyN58+w|rnY{}
zJb&hwa(MT`v}>2%pI>jeJ#%G-FcXjbzbLVTcc*Evzlr1wnZC!*LO!W_<CetxzkmHL
zxp&*S{r;Kz4y-R)@}|Yz`?6>5?>CQmx7r-PKIi!D61mNSy*Gn?NDDqVb>{cVd<OOJ
zJ1&3fmtA##scdvl&Yo$9;tRRAEK)tS`St0OPp4%}x6wZT{_$q>RNYN4IR9_Iv#htY
zI_!tE&;pMM&D&y|wr9m|&}iJd`or_P%hucet-IHIYvWPNe;>>*GOguEe|P-;*FCjU
z*uH<5_P1`G#co^O^Z#c2`pXr)pto(mC*!&`+`rx(sPjC2%Y5OfbC+_09?HJ-V!2WA
zW47o6d#38?cRVyeK25vEaD5GTnU}-+?mI!gUw@aj?SIL2VdmGO`}GCK>%W!mDp)Ss
zcQoinGiQOk_`YlJIb|m@G`H`6DaLV2j>+K%C&NQ^hL-sZ0(CG>Q~P`d4%s?j#`wY6
zZ~-Xm)NcP-<J8s6hl<w^t%s>X(b7`ydu<>8g#*fE3V*afrlIMF3m7NvlM$c(<<4<V
z$vRPng@^qaTKMc4Tk7?HDF}ew(%%)UumYOd88{d~x&MM*J&Oc`orv~%#lMf5f#nf{
Mr>mdKI;Vst0C&{+5C8xG

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-03.png b/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-03.png
new file mode 100644
index 0000000000000000000000000000000000000000..9799ca98c6ab681ec13d8170cc5413aca207b4f6
GIT binary patch
literal 2322
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
RSe-4102Hz_sl_HR?H@m90@45g

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-04.png b/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-04.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f9de2c8169c90eb6c4e1b453f93949afa73d383
GIT binary patch
literal 2933
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
Wchg%lYCCo|04sAFv-_sx#Qy>-5gBj*

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-05.png b/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-05.png
new file mode 100644
index 0000000000000000000000000000000000000000..47189c514cdba220d4f89c46dc7e1352e3739444
GIT binary patch
literal 1787
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
OKo)psPh9hHQpUg4=QB9~

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/styles/base/plc-softkeys.less b/Step/wwwroot/assets/styles/base/plc-softkeys.less
index efe5e6c5..4a30d79d 100644
--- a/Step/wwwroot/assets/styles/base/plc-softkeys.less
+++ b/Step/wwwroot/assets/styles/base/plc-softkeys.less
@@ -103,6 +103,10 @@
             position: relative;
             padding: 0;
             width: 100%;
+            .fa-icons{
+              font-size: 32px;
+              color: #b2b2b2;
+            }
             img {
                 filter: brightness(70%);
             }
@@ -111,6 +115,9 @@
                 img {
                     filter: brightness(100%);
                 }
+                .fa-icons{
+                  color: #fff;
+                }
             }
             &:first-child {
                 border-left: none;
@@ -188,7 +195,7 @@
     box-sizing: border-box;
     background-color: @color-bluish-grey;
     -webkit-tap-highlight-color: transparent;
-    &.command {        
+    &.command {
     }
     .menu-container {
         width: 360px;
@@ -277,11 +284,11 @@
         font-size: 14px;
         line-height: 21px;
         border-bottom: 1px solid #fff;
-        box-sizing: content-box;        
+        box-sizing: content-box;
         white-space: nowrap;
         overflow: hidden;
     }
-    &.active {        
+    &.active {
         box-shadow: inset 0px 0px 0px 3px rgba(23, 145, 255, 1);
     }
     button.star {
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 30b2b162..82e14599 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -1558,6 +1558,10 @@ footer .container button.big:before {
   padding: 0;
   width: 100%;
 }
+#plc-softkeys-container > div > header button .fa-icons {
+  font-size: 32px;
+  color: #b2b2b2;
+}
 #plc-softkeys-container > div > header button img {
   filter: brightness(70%);
 }
@@ -1567,6 +1571,9 @@ footer .container button.big:before {
 #plc-softkeys-container > div > header button.active img {
   filter: brightness(100%);
 }
+#plc-softkeys-container > div > header button.active .fa-icons {
+  color: #fff;
+}
 #plc-softkeys-container > div > header button:first-child {
   border-left: none;
 }
diff --git a/Step/wwwroot/src/modules/plc-softkeys.vue b/Step/wwwroot/src/modules/plc-softkeys.vue
index c0a9df6f..0465314f 100644
--- a/Step/wwwroot/src/modules/plc-softkeys.vue
+++ b/Step/wwwroot/src/modules/plc-softkeys.vue
@@ -8,7 +8,12 @@
       <button v-if="isSectionVisible(4)" :class="{active:selectedSection==4}" @click="selectSection(4)"><span class="number">4.</span><img src="assets/icons/under-hood-png/cat-4.png"></button>
       <button v-if="isSectionVisible(5)" :class="{active:selectedSection==5}" @click="selectSection(5)"><span class="number">5.</span><img src="assets/icons/under-hood-png/cat-5.png"></button>
       <button v-if="isSectionVisible(6)" :class="{active:selectedSection==6}" @click="selectSection(6)"><span class="number">6.</span><img src="assets/icons/under-hood-png/cat-6.png"></button>
-      <button v-if="isSectionVisible(7)" :class="{active:selectedSection==7}" @click="selectSection(7)"><span class="number">7.</span></button>
+      <button v-if="isSectionVisible(7)" :class="{active:selectedSection==7}" @click="selectSection(7)"><span class="number">7.</span>
+        <div class="fa-icons">
+          <i class="fa fa-arrow-up"></i>
+          <i class="fa fa-arrow-down"></i>
+        </div>
+      </button>
     </header>
     <div class="title" >{{'sfk_category_' + selectedSection | localize('sfk_category_' + selectedSection) }}</div>
     <section class="scrollable" ref="scrollable">

From 151e4bd28b508c98ca6d10d482632d682230010a Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 11:24:15 +0200
Subject: [PATCH 11/26] icons

---
 .../{CMS-icons-02.png => dnc.png}             | Bin
 .../{CMS-icons-03.png => handle.png}          | Bin
 .../assets/icons/under-hood-png/handle2.png   | Bin 0 -> 2192 bytes
 .../{CMS-icons-05.png => repos.png}           | Bin
 .../assets/icons/under-hood-png/repos2.png    | Bin 0 -> 1900 bytes
 .../{CMS-icons-01.png => teach.png}           | Bin
 .../{CMS-icons-04.png => wcs.png}             | Bin
 .../assets/icons/under-hood-png/wcs2.png      | Bin 0 -> 2318 bytes
 Step/wwwroot/src/modules/nc-softkeys.vue      |  18 +++++++++---------
 9 files changed, 9 insertions(+), 9 deletions(-)
 rename Step/wwwroot/assets/icons/under-hood-png/{CMS-icons-02.png => dnc.png} (100%)
 rename Step/wwwroot/assets/icons/under-hood-png/{CMS-icons-03.png => handle.png} (100%)
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/handle2.png
 rename Step/wwwroot/assets/icons/under-hood-png/{CMS-icons-05.png => repos.png} (100%)
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/repos2.png
 rename Step/wwwroot/assets/icons/under-hood-png/{CMS-icons-01.png => teach.png} (100%)
 rename Step/wwwroot/assets/icons/under-hood-png/{CMS-icons-04.png => wcs.png} (100%)
 create mode 100644 Step/wwwroot/assets/icons/under-hood-png/wcs2.png

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-02.png b/Step/wwwroot/assets/icons/under-hood-png/dnc.png
similarity index 100%
rename from Step/wwwroot/assets/icons/under-hood-png/CMS-icons-02.png
rename to Step/wwwroot/assets/icons/under-hood-png/dnc.png
diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-03.png b/Step/wwwroot/assets/icons/under-hood-png/handle.png
similarity index 100%
rename from Step/wwwroot/assets/icons/under-hood-png/CMS-icons-03.png
rename to Step/wwwroot/assets/icons/under-hood-png/handle.png
diff --git a/Step/wwwroot/assets/icons/under-hood-png/handle2.png b/Step/wwwroot/assets/icons/under-hood-png/handle2.png
new file mode 100644
index 0000000000000000000000000000000000000000..81b94723d8dcdba08fdd8165455217bb5c022bfb
GIT binary patch
literal 2192
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
S?epmX0000<MNUMnLSTYyl@faZ

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-05.png b/Step/wwwroot/assets/icons/under-hood-png/repos.png
similarity index 100%
rename from Step/wwwroot/assets/icons/under-hood-png/CMS-icons-05.png
rename to Step/wwwroot/assets/icons/under-hood-png/repos.png
diff --git a/Step/wwwroot/assets/icons/under-hood-png/repos2.png b/Step/wwwroot/assets/icons/under-hood-png/repos2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d7bc10133edb5e610a3d78eb7c733327c64e4bd
GIT binary patch
literal 1900
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

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-01.png b/Step/wwwroot/assets/icons/under-hood-png/teach.png
similarity index 100%
rename from Step/wwwroot/assets/icons/under-hood-png/CMS-icons-01.png
rename to Step/wwwroot/assets/icons/under-hood-png/teach.png
diff --git a/Step/wwwroot/assets/icons/under-hood-png/CMS-icons-04.png b/Step/wwwroot/assets/icons/under-hood-png/wcs.png
similarity index 100%
rename from Step/wwwroot/assets/icons/under-hood-png/CMS-icons-04.png
rename to Step/wwwroot/assets/icons/under-hood-png/wcs.png
diff --git a/Step/wwwroot/assets/icons/under-hood-png/wcs2.png b/Step/wwwroot/assets/icons/under-hood-png/wcs2.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5323cdb8331a77aeb49f7c3fc873c7c1a779d2d
GIT binary patch
literal 2318
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

literal 0
HcmV?d00001

diff --git a/Step/wwwroot/src/modules/nc-softkeys.vue b/Step/wwwroot/src/modules/nc-softkeys.vue
index 487b5beb..a606253a 100644
--- a/Step/wwwroot/src/modules/nc-softkeys.vue
+++ b/Step/wwwroot/src/modules/nc-softkeys.vue
@@ -1,32 +1,32 @@
 <template>
 <div id="nc-softkeys-container">
-  <div v-if="machineInfo.isFanuc  ">
+  <div v-if="machineInfo.isFanuc">
     <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
     <button @click="ncClick(2)" :disabled="!isKeyActive(2)" :class="{active:isKeySelected(2) , readonly:isReadOnly(2)}" class="soft icon"><img src="assets/icons/under-hood-png/edit-blue@2x.png">{{name(2)}}</button>
     <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
-    <button @click="ncClick(4)" :disabled="!isKeyActive(4)" :class="{active:isKeySelected(4) , readonly:isReadOnly(4)}" class="soft icon"><img src="assets/icons/under-hood-png/dnc-blue@2x.png">{{name(4)}}</button>
+    <button @click="ncClick(4)" :disabled="!isKeyActive(4)" :class="{active:isKeySelected(4) , readonly:isReadOnly(4)}" class="soft icon"><img src="assets/icons/under-hood-png/dnc.png">{{name(4)}}</button>
     <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9) , readonly:isReadOnly(9)}" class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{name(9)}}</button>
     <button @click="ncClick(8)" :disabled="!isKeyActive(8)" :class="{active:isKeySelected(8) , readonly:isReadOnly(8)}" class="soft icon"><img src="assets/icons/under-hood-png/restart-blue@2x.png">{{name(8)}}</button>
     <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{name(5)}}</button>
     <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{name(6)}}</button>
     <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{name(7)}}</button>
     <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{name(13)}}</button>
-    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retract-blue@2x.png">{{name(10)}}</button>
-    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{name(12)}}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos2.png">{{name(10)}}</button>
+    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle2.png">{{name(12)}}</button>
   </div>
-  <div v-if="machineInfo.isSiemens">
+  <div v-if="machineInfo.isSiemens ">
     <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
     <button @click="ncClick(3)" :disabled="!isKeyActive(3)" :class="{active:isKeySelected(3) , readonly:isReadOnly(3)}" class="soft icon"><img src="assets/icons/under-hood-png/MDI-blue@2x.png">{{name(3)}}</button>
     <div class="empty-space"></div>
-    <button @click="ncClick(11)" :disabled="!isKeyActive(11)" :class="{active:isKeySelected(11) , readonly:isReadOnly(11)}"  class="soft icon"><img src="assets/icons/under-hood-png/wcsmcs-blue@2x.png">{{name(11)}}</button>
+    <button @click="ncClick(11)" :disabled="!isKeyActive(11)" :class="{active:isKeySelected(11) , readonly:isReadOnly(11)}"  class="soft icon"><img src="assets/icons/under-hood-png/wcs2.png">{{name(11)}}</button>
     <button @click="ncClick(9)" :disabled="!isKeyActive(9)" :class="{active:isKeySelected(9) , readonly:isReadOnly(9)}"  class="soft icon"><img src="assets/icons/under-hood-png/teach-blue@2x.png">{{name(9)}}</button>
     <div class="empty-space"></div>
     <button @click="ncClick(5)" :disabled="!isKeyActive(5)" :class="{active:isKeySelected(5) , readonly:isReadOnly(5)}" class="soft icon"><img src="assets/icons/under-hood-png/ref-blue@2x.png">{{name(5)}}</button>
     <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{name(6)}}</button>
     <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{name(7)}}</button>
     <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{name(13)}}</button>
-    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos-blue@2x.png">{{name(10)}}</button>
-    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle-blue@2x.png">{{name(12)}}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos2.png">{{name(10)}}</button>
+    <button @click="ncClick(12)" :disabled="!isKeyActive(12)" :class="{active:isKeySelected(12) , readonly:isReadOnly(12)}" class="soft icon"><img src="assets/icons/under-hood-png/handle2.png">{{name(12)}}</button>
   </div>
   <div v-if="machineInfo.isOsai || isDemo" >
     <button @click="ncClick(1)" :disabled="!isKeyActive(1)" :class="{active:isKeySelected(1) , readonly:isReadOnly(1)}" class="soft icon"><img src="assets/icons/under-hood-png/automatic-blue@2x.png">{{name(1)}}</button>
@@ -36,7 +36,7 @@
     <button @click="ncClick(6)" :disabled="!isKeyActive(6)" :class="{active:isKeySelected(6) , readonly:isReadOnly(6)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-blue@2x.png">{{name(6)}}</button>
     <button @click="ncClick(7)" :disabled="!isKeyActive(7)" :class="{active:isKeySelected(7) , readonly:isReadOnly(7)}" class="soft icon"><img src="assets/icons/under-hood-png/jog-inc-blue@2x.png">{{name(7)}}</button>
     <button @click="ncClick(13)" :disabled="!isKeyActive(13)" :class="{active:isKeySelected(13) , readonly:isReadOnly(13)}" class="soft icon"><img src="assets/icons/under-hood-png/reset-blue@2x.png">{{name(13)}}</button>
-    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/retrpof-blue@2x.png">{{name(10)}}</button>
+    <button @click="ncClick(10)" :disabled="!isKeyActive(10)" :class="{active:isKeySelected(10) , readonly:isReadOnly(10)}" class="soft icon"><img src="assets/icons/under-hood-png/repos2.png">{{name(10)}}</button>
     <div class="empty-space"></div>
     <div class="empty-space"></div>
     <div class="empty-space"></div>

From 63af8bb9049cec77be72f6e5575407c51f6fb460 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 9 Apr 2018 11:27:54 +0200
Subject: [PATCH 12/26] Traduzioni

---
 Step.Utils/languages/IT.xml |  5 ++---
 Step.Utils/languages/en.xml | 20 +++++++++++++++++++-
 Step.Utils/languages/zh.xml | 20 ++++++++++++++++++++
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/Step.Utils/languages/IT.xml b/Step.Utils/languages/IT.xml
index b08cd07a..5cc69630 100644
--- a/Step.Utils/languages/IT.xml
+++ b/Step.Utils/languages/IT.xml
@@ -40,8 +40,7 @@
   <machineinfo_umeas>Unità di misura Cn:</machineinfo_umeas>
   <machineinfo_server_cms_version>Versione Server Step:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Versione Core Step:</machineinfo_core_cms_version>
-  <machineinfo_client_version>Versione Client Step:</machineinfo_client_version> 
-  
+  <machineinfo_client_version>Versione Client Step:</machineinfo_client_version>  
   <head_label_rpm>Rpm</head_label_rpm> 
   <head_label_tool>Utensile</head_label_tool> 
   <head_label_load>Carico</head_label_load> 
@@ -57,8 +56,8 @@
   <sfk_category_5>5. Carico / Scarico</sfk_category_5>
   <sfk_category_6>6. Lancio procedure / Programmi utente</sfk_category_6>
   <sfk_category_7>7. Attrezzaggio e protezioni</sfk_category_7>
-  
   <softkey_confirm>Sei sicuro?</softkey_confirm>
   <confirm_request_confirm>Conferma</confirm_request_confirm>
   <confirm_request_cancel>Annulla</confirm_request_cancel> 
+  <language_it>Italiano</language_it>
 </root>
\ No newline at end of file
diff --git a/Step.Utils/languages/en.xml b/Step.Utils/languages/en.xml
index fe88b683..aee148c9 100644
--- a/Step.Utils/languages/en.xml
+++ b/Step.Utils/languages/en.xml
@@ -41,5 +41,23 @@
   <machineinfo_server_cms_version>Step Server Version:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Step Core Version:</machineinfo_core_cms_version>
   <machineinfo_client_version>Step Client Version:</machineinfo_client_version>
-  <language_it>Italian</language_it>
+  <head_label_rpm>Rpm</head_label_rpm> 
+  <head_label_tool>Tool</head_label_tool> 
+  <head_label_load>Load</head_label_load> 
+  <head_label_pressure>MPa</head_label_pressure> 
+  <head_label_abrasive>Abrasive</head_label_abrasive> 
+  <head_label_gmin>g/min</head_label_gmin> 
+  <head_label_vacuum>Vacuum</head_label_vacuum> 
+  <head_label_bar>bar</head_label_bar>   
+  <sfk_category_1>1. Generic Softkeys</sfk_category_1>
+  <sfk_category_2>2. Locks / Vacuum areas</sfk_category_2>
+  <sfk_category_3>3. Head And Cooling devices</sfk_category_3>
+  <sfk_category_4>4. Modes of working</sfk_category_4>
+  <sfk_category_5>5. Load / Unload</sfk_category_5>
+  <sfk_category_6>6. User subprograms</sfk_category_6>
+  <sfk_category_7>7. Equipping and protections</sfk_category_7>
+  <softkey_confirm>Are you sure?</softkey_confirm>
+  <confirm_request_confirm>Confirm</confirm_request_confirm>
+  <confirm_request_cancel>Cancel</confirm_request_cancel>
+  <language_it>English</language_it>
 </root>
\ No newline at end of file
diff --git a/Step.Utils/languages/zh.xml b/Step.Utils/languages/zh.xml
index 5d1ca4f0..edce55ec 100644
--- a/Step.Utils/languages/zh.xml
+++ b/Step.Utils/languages/zh.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
 <root>
   <machineinfo_lbl_title>機器信息</machineinfo_lbl_title>
   <userinfo_lbl_title>用戶設置</userinfo_lbl_title>
@@ -40,4 +41,23 @@
   <machineinfo_server_cms_version>Step 服務器版本:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Step 核心版本:</machineinfo_core_cms_version>
   <machineinfo_client_version>Step 客戶端版本:</machineinfo_client_version>
+  <head_label_rpm>轉</head_label_rpm> 
+  <head_label_tool>工具</head_label_tool> 
+  <head_label_load>加載</head_label_load> 
+  <head_label_pressure>兆帕</head_label_pressure> 
+  <head_label_abrasive>磨料</head_label_abrasive> 
+  <head_label_gmin>克/分鐘</head_label_gmin> 
+  <head_label_vacuum>真空</head_label_vacuum> 
+  <head_label_bar>酒吧</head_label_bar>   
+  <sfk_category_1>1. 通用軟鍵</sfk_category_1>
+  <sfk_category_2>2. 鎖/真空區域</sfk_category_2>
+  <sfk_category_3>3. 頭部和冷卻裝置</sfk_category_3>
+  <sfk_category_4>4. 工作模式</sfk_category_4>
+  <sfk_category_5>5. 加載/卸載</sfk_category_5>
+  <sfk_category_6>6. 用戶子程序</sfk_category_6>
+  <sfk_category_7>7. 裝備和保護</sfk_category_7>
+  <softkey_confirm>你確定？</softkey_confirm>
+  <confirm_request_confirm>確認</confirm_request_confirm>
+  <confirm_request_cancel>取消</confirm_request_cancel>
+  <language_it>中文</language_it>
 </root>
\ No newline at end of file

From dce8d2170bdd9a1bd3784570208613cbd33d830f Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Mon, 9 Apr 2018 11:43:37 +0200
Subject: [PATCH 13/26] traduzioni 2

---
 Step.Utils/languages/IT.xml | 1 +
 Step.Utils/languages/en.xml | 1 +
 Step.Utils/languages/zh.xml | 1 +
 3 files changed, 3 insertions(+)

diff --git a/Step.Utils/languages/IT.xml b/Step.Utils/languages/IT.xml
index 5cc69630..a779dc09 100644
--- a/Step.Utils/languages/IT.xml
+++ b/Step.Utils/languages/IT.xml
@@ -41,6 +41,7 @@
   <machineinfo_server_cms_version>Versione Server Step:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Versione Core Step:</machineinfo_core_cms_version>
   <machineinfo_client_version>Versione Client Step:</machineinfo_client_version>  
+    <support_summary>Scadenza: </support_summary>
   <head_label_rpm>Rpm</head_label_rpm> 
   <head_label_tool>Utensile</head_label_tool> 
   <head_label_load>Carico</head_label_load> 
diff --git a/Step.Utils/languages/en.xml b/Step.Utils/languages/en.xml
index aee148c9..9b466e1a 100644
--- a/Step.Utils/languages/en.xml
+++ b/Step.Utils/languages/en.xml
@@ -41,6 +41,7 @@
   <machineinfo_server_cms_version>Step Server Version:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Step Core Version:</machineinfo_core_cms_version>
   <machineinfo_client_version>Step Client Version:</machineinfo_client_version>
+  <support_summary>Expiration:</support_summary>
   <head_label_rpm>Rpm</head_label_rpm> 
   <head_label_tool>Tool</head_label_tool> 
   <head_label_load>Load</head_label_load> 
diff --git a/Step.Utils/languages/zh.xml b/Step.Utils/languages/zh.xml
index edce55ec..96272e4f 100644
--- a/Step.Utils/languages/zh.xml
+++ b/Step.Utils/languages/zh.xml
@@ -41,6 +41,7 @@
   <machineinfo_server_cms_version>Step 服務器版本:</machineinfo_server_cms_version>
   <machineinfo_core_cms_version>Step 核心版本:</machineinfo_core_cms_version>
   <machineinfo_client_version>Step 客戶端版本:</machineinfo_client_version>
+  <support_summary>呼氣:</support_summary>
   <head_label_rpm>轉</head_label_rpm> 
   <head_label_tool>工具</head_label_tool> 
   <head_label_load>加載</head_label_load> 

From 40c316d5cbad680d8554570da317648d2b8178b0 Mon Sep 17 00:00:00 2001
From: Lucio Maranta <lucio.maranta@cms.it>
Date: Mon, 9 Apr 2018 16:34:14 +0200
Subject: [PATCH 14/26] Set signalR json to camelCase format

---
 Step/App_Start/Startup.cs | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Step/App_Start/Startup.cs b/Step/App_Start/Startup.cs
index bbb8ec2e..3a56e913 100644
--- a/Step/App_Start/Startup.cs
+++ b/Step/App_Start/Startup.cs
@@ -90,13 +90,13 @@ namespace Step.App_Start
         public void SignalRConfig(IAppBuilder app)
         {
             // Set CamelCase json configuration
-            //var settings = new JsonSerializerSettings
-            //{
-            //    ContractResolver = new SignalRContractResolver()
-            //};
+            var settings = new JsonSerializerSettings
+            {
+                ContractResolver = new SignalRContractResolver()
+            };
 
-            //var serializer = JsonSerializer.Create(settings);
-            //GlobalHost.DependencyResolver.Register(typeof(JsonSerializer), () => serializer);
+            var serializer = JsonSerializer.Create(settings);
+            GlobalHost.DependencyResolver.Register(typeof(JsonSerializer), () => serializer);
 
             // Set up signalR config
             app.Map("/signalr", map =>

From bd6e6def298d4903dc07d3909dcbb790fb4d4d48 Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 17:10:11 +0200
Subject: [PATCH 15/26] alarms

---
 Step/wwwroot/src/@types/signalr.alarms.d.ts   | 38 +++++++--------
 .../wwwroot/src/@types/signalr.functions.d.ts |  8 ++--
 Step/wwwroot/src/services/hub.ts              | 32 ++++++-------
 Step/wwwroot/src/store/alarms.store.ts        | 18 ++++----
 Step/wwwroot/src/store/machineStatus.store.ts | 46 +++++++++----------
 5 files changed, 71 insertions(+), 71 deletions(-)

diff --git a/Step/wwwroot/src/@types/signalr.alarms.d.ts b/Step/wwwroot/src/@types/signalr.alarms.d.ts
index 980b2ac2..80fb4c8f 100644
--- a/Step/wwwroot/src/@types/signalr.alarms.d.ts
+++ b/Step/wwwroot/src/@types/signalr.alarms.d.ts
@@ -19,37 +19,37 @@ declare module signalr_alarms {
   }
 
   interface alarmMessage {
-    NcAlarms: Array<genericAlarm>,
-    PlcAlarms: Array<genericAlarm>,
-    ProcessAlarms: Array<processAlarm>,
+    ncAlarms: Array<genericAlarm>,
+    plcAlarms: Array<genericAlarm>,
+    processAlarms: Array<processAlarm>,
   }
 
   interface powerItemValue {
-    Id: number,
-    Active: boolean,
-    Clickable: boolean
+    id: number,
+    active: boolean,
+    clickable: boolean
   }
 
   interface prePowerOnMessage {
-    AirPressure: powerItemValue;
-    EmergencyButtons: powerItemValue;
-    PowerOn: powerItemValue;
-    ProtectionStatus: powerItemValue;
-    SettingMode: powerItemValue;
-    StartingKey: powerItemValue;
+    airPressure: powerItemValue;
+    emergencyButtons: powerItemValue;
+    powerOn: powerItemValue;
+    protectionStatus: powerItemValue;
+    settingMode: powerItemValue;
+    startingKey: powerItemValue;
   }
 
   interface postPowerOnMessage {
-    AxisReset: powerItemValue;
-    WaterjetPump: powerItemValue;
+    axisReset: powerItemValue;
+    waterjetPump: powerItemValue;
   }
 
   interface powerMessage {
-    AxisReset: {
-      IsActive: boolean,
-      Percentage: number
+    axisReset: {
+      isActive: boolean,
+      percentage: number
     }
-    PostPowerOn: postPowerOnMessage;
-    PrePowerOn: prePowerOnMessage;
+    postPowerOn: postPowerOnMessage;
+    prePowerOn: prePowerOnMessage;
   }
 }
diff --git a/Step/wwwroot/src/@types/signalr.functions.d.ts b/Step/wwwroot/src/@types/signalr.functions.d.ts
index 3efb893a..066769d5 100644
--- a/Step/wwwroot/src/@types/signalr.functions.d.ts
+++ b/Step/wwwroot/src/@types/signalr.functions.d.ts
@@ -1,10 +1,10 @@
 declare module signalr_security{
 
   interface securityFunction{
-    Id: number,
-    Name: string,
-    Area: string,
-    Enabled: boolean
+    id: number,
+    name: string,
+    area: string,
+    enabled: boolean
   }
 
 }
diff --git a/Step/wwwroot/src/services/hub.ts b/Step/wwwroot/src/services/hub.ts
index c5889682..d4401184 100644
--- a/Step/wwwroot/src/services/hub.ts
+++ b/Step/wwwroot/src/services/hub.ts
@@ -19,7 +19,7 @@ function recalcArrayId(prefix: string, alarms: Array<signalr_alarms.genericAlarm
   for (const key in alarms) {
     if (alarms.hasOwnProperty(key)) {
       const element = alarms[key];
-      element.guid = prefix + "__" + (element.id || element.Id).toString();
+      element.guid = prefix + "__" + (element.id).toString();
       element.source = prefix.toUpperCase();
     }
   }
@@ -152,10 +152,10 @@ export class Hub {
     for (const key in status) {
       if (status.hasOwnProperty(key)) {
         const element = status[key];
-        alarmsModelActions.addServiceAlarm(store, { guid: "maint_" + element.Id, id: element.Id, dateTime: new Date(element.ExpirationDate) } as any)
+        alarmsModelActions.addServiceAlarm(store, { guid: "maint_" + element.id, id: element.id, dateTime: new Date(element.expirationDate) } as any)
       }
     }
-    alarmsModelActions.checkRemoveServiceAlarm(store, status.map(i => "maint_" + i.Id));
+    alarmsModelActions.checkRemoveServiceAlarm(store, status.map(i => "maint_" + i.id));
   }
 
   private static manageProcesses(status: signalr_process.DTOProcessDataModel) {
@@ -227,11 +227,11 @@ export class Hub {
 
   private manageAlarmsCallbacks(alarms: signalr_alarms.alarmMessage) {
 
-    recalcArrayId("cn", alarms.NcAlarms);
-    recalcArrayId("plc", alarms.PlcAlarms);
-    recalcArrayId("cn", alarms.ProcessAlarms);
+    recalcArrayId("cn", alarms.ncAlarms);
+    recalcArrayId("plc", alarms.plcAlarms);
+    recalcArrayId("cn", alarms.processAlarms);
 
-    let tempList = alarms.NcAlarms.concat(alarms.PlcAlarms).concat(alarms.ProcessAlarms);
+    let tempList = alarms.ncAlarms.concat(alarms.plcAlarms).concat(alarms.processAlarms);
 
     for (const key in tempList) {
       if (tempList.hasOwnProperty(key)) {
@@ -251,19 +251,19 @@ export class Hub {
 
 
 
-    machineStatusActions.setResetAxes(store, { reset: power.AxisReset.IsActive, progress: power.AxisReset.Percentage });
+    machineStatusActions.setResetAxes(store, { reset: power.axisReset.isActive, progress: power.axisReset.percentage });
 
     // Pre-power on
-    machineStatusActions.setAirPressureAlarm(store, power.PrePowerOn.AirPressure);
-    machineStatusActions.setPowerAlarm(store, power.PrePowerOn.PowerOn);
-    machineStatusActions.setEmergencyAlarm(store, power.PrePowerOn.EmergencyButtons);
-    machineStatusActions.setProtectionsAlarm(store, power.PrePowerOn.ProtectionStatus);
-    machineStatusActions.setSettingsModeAlarm(store, power.PrePowerOn.SettingMode);
-    machineStatusActions.setKeyReadyAlarm(store, power.PrePowerOn.StartingKey);
+    machineStatusActions.setAirPressureAlarm(store, power.prePowerOn.airPressure);
+    machineStatusActions.setPowerAlarm(store, power.prePowerOn.powerOn);
+    machineStatusActions.setEmergencyAlarm(store, power.prePowerOn.emergencyButtons);
+    machineStatusActions.setProtectionsAlarm(store, power.prePowerOn.protectionStatus);
+    machineStatusActions.setSettingsModeAlarm(store, power.prePowerOn.settingMode);
+    machineStatusActions.setKeyReadyAlarm(store, power.prePowerOn.startingKey);
 
     // Post-power on
-    machineStatusActions.setResetAxesAlarm(store, power.PostPowerOn.AxisReset);
-    machineStatusActions.setWaterJet1Alarm(store, power.PostPowerOn.WaterjetPump);
+    machineStatusActions.setResetAxesAlarm(store, power.postPowerOn.axisReset);
+    machineStatusActions.setWaterJet1Alarm(store, power.postPowerOn.waterjetPump);
   }
 
   _axesVisible: boolean = false;
diff --git a/Step/wwwroot/src/store/alarms.store.ts b/Step/wwwroot/src/store/alarms.store.ts
index 7667460a..300f9717 100644
--- a/Step/wwwroot/src/store/alarms.store.ts
+++ b/Step/wwwroot/src/store/alarms.store.ts
@@ -55,12 +55,12 @@ export const alarmsStore = {
 
       if (!store._alarms.has(alarm.guid)) {
         store._alarms.set(alarm.guid, {
-          date: (alarm.dateTime || alarm.DateTime),
+          date: (alarm.dateTime ),
           source: alarm.source,
-          id: (alarm.id || alarm.Id).toString(),
+          id: (alarm.id ).toString(),
           uid: alarm.guid,
           description: null,
-          title: alarm.message || alarm.Message,
+          title: alarm.message ,
           process: (alarm as any).process,
           status: "active",
           type: "alarm"
@@ -73,12 +73,12 @@ export const alarmsStore = {
     AddWarning(store, alarm: signalr_alarms.genericAlarm) {
       if (!store._warnings.has(alarm.guid)) {
         store._warnings.set(alarm.guid, {
-          date:(alarm.dateTime || alarm.DateTime),
+          date:(alarm.dateTime),
           source: alarm.source,
-          id: (alarm.id || alarm.Id).toString(),
+          id: (alarm.id ).toString(),
           uid: alarm.guid,
           description: null,
-          title: alarm.message || alarm.Message,
+          title: alarm.message ,
           process: (alarm as any).process,
           status: "active",
           type: "warning"
@@ -117,11 +117,11 @@ export const alarmsStore = {
     AddServiceAlarm(store, alarm: signalr_alarms.genericAlarm) {
       if (!store._serviceAlarms.has(alarm.guid)) {
         store._serviceAlarms.set(alarm.guid, {
-          date: (alarm.dateTime || alarm.DateTime),
-          id: (alarm.id || alarm.Id || "").toString(),
+          date: (alarm.dateTime ),
+          id: (alarm.id || "").toString(),
           uid: alarm.guid,
           description: null,
-          title: alarm.message || alarm.Message,
+          title: alarm.message ,
           status: "active",
           type: "service"
         } as AlarmModel);
diff --git a/Step/wwwroot/src/store/machineStatus.store.ts b/Step/wwwroot/src/store/machineStatus.store.ts
index 9eb7afd2..7aad8643 100644
--- a/Step/wwwroot/src/store/machineStatus.store.ts
+++ b/Step/wwwroot/src/store/machineStatus.store.ts
@@ -53,9 +53,9 @@ export interface MachineStatusModel {
 }
 
 export interface buttonStatus {
-  Active: boolean,
-  Clickable: boolean,
-  Id: number
+  active: boolean,
+  clickable: boolean,
+  id: number
 }
 
 export interface MachineStatusActions {
@@ -82,16 +82,16 @@ export interface MachineStatusActions {
 export const machineStatusStore = {
   state: {
 
-    powerOnAlarm: { Active: false, Clickable: false, Id: null },
-    airPressureAlarm: { Active: false, Clickable: false, Id: null },
-    protectionsAlarm: { Active: false, Clickable: false, Id: null },
-    emergencyAlarm: { Active: false, Clickable: false, Id: null },
-    settingsModeAlarm: { Active: false, Clickable: false, Id: null },
-    keyReadyAlarm: { Active: false, Clickable: false, Id: null },
+    powerOnAlarm: { active: false, clickable: false, id: null },
+    airPressureAlarm: { active: false, clickable: false, id: null },
+    protectionsAlarm: { active: false, clickable: false, id: null },
+    emergencyAlarm: { active: false, clickable: false, id: null },
+    settingsModeAlarm: { active: false, clickable: false, id: null },
+    keyReadyAlarm: { active: false, clickable: false, id: null },
 
-    resetAxesAlarm: { Active: false, Clickable: false, Id: null },
-    waterJet1Alarm: { Active: false, Clickable: false, Id: null },
-    waterJet2Alarm: { Active: false, Clickable: false, Id: null },
+    resetAxesAlarm: { active: false, clickable: false, id: null },
+    waterJet1Alarm: { active: false, clickable: false, id: null },
+    waterJet2Alarm: { active: false, clickable: false, id: null },
 
     ncReady: false,
 
@@ -112,17 +112,17 @@ export const machineStatusStore = {
   } as MachineStatusModel,
   getters: {
     mainStatus: state => {
-      return state.powerOnAlarm.Active ||
-        state.airPressureAlarm.Active ||
-        state.protectionsAlarm.Active ||
-        state.emergencyAlarm.Active ||
-        state.settingsModeAlarm.Active ||
-        state.keyReadyAlarm.Active;
+      return state.powerOnAlarm.active ||
+        state.airPressureAlarm.active ||
+        state.protectionsAlarm.active ||
+        state.emergencyAlarm.active ||
+        state.settingsModeAlarm.active ||
+        state.keyReadyAlarm.active;
     },
     powerOnAlarms: state => {
-      return state.resetAxesAlarm.Active ||
-        state.waterJet1Alarm.Active ||
-        state.waterJet2Alarm.Active;
+      return state.resetAxesAlarm.active ||
+        state.waterJet1Alarm.active ||
+        state.waterJet2Alarm.active;
     },
     securityFunction: state => id => {
       return state._functions.get[id];
@@ -148,8 +148,8 @@ export const machineStatusStore = {
   },
   mutations: {
     SetSecurityFunction(store, func: signalr_security.securityFunction) {
-      if (!store._functions.has(func.Id) || store._functions.get(func.Name).Enabled != func.Enabled) {
-        store._functions.set(func.Name, func);
+      if (!store._functions.has(func.id) || store._functions.get(func.name).Enabled != func.enabled) {
+        store._functions.set(func.name, func);
         store.functions = Array.from(store._functions.values());
         Factory.Get(MessageService).publishToChannel("force-ui-update");
       }

From 1f90276587767fbf53b532383435c71248695d1e Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 17:11:56 +0200
Subject: [PATCH 16/26] softkeys

---
 Step/wwwroot/src/modules/nc-softkeys.vue | 4 ++--
 Step/wwwroot/src/modules/plc-softkeys.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Step/wwwroot/src/modules/nc-softkeys.vue b/Step/wwwroot/src/modules/nc-softkeys.vue
index a606253a..0a0adedc 100644
--- a/Step/wwwroot/src/modules/nc-softkeys.vue
+++ b/Step/wwwroot/src/modules/nc-softkeys.vue
@@ -73,12 +73,12 @@ export default {
       if(this.checkSecurityDisabled('ncSoftkeys')) return false;
 
       let r = this.$store.getters.getNcSoftKeyStatus(id);
-      if (r) return r.Active;
+      if (r) return r.active;
       return false;
     },
     isKeySelected(id) {
       let r = this.$store.getters.getNcSoftKeyStatus(id);
-      if (r) return r.Value;
+      if (r) return r.value;
       return false;
     },
     name(id){
diff --git a/Step/wwwroot/src/modules/plc-softkeys.ts b/Step/wwwroot/src/modules/plc-softkeys.ts
index 3739c708..3133303f 100644
--- a/Step/wwwroot/src/modules/plc-softkeys.ts
+++ b/Step/wwwroot/src/modules/plc-softkeys.ts
@@ -28,7 +28,7 @@ export default class softKeys extends Vue {
   public getSoftKeyStatus(id: number): boolean {
     var sk = this.$store.getters.getSoftKeyStatus(id);
     if (sk)
-      return sk.Value;
+      return sk.value;
     return false;
   }
 
@@ -43,7 +43,7 @@ export default class softKeys extends Vue {
   public getSoftKeyActive(id: number): boolean {
     var sk = this.$store.getters.getSoftKeyStatus(id);
     if (sk)
-      return sk.Active;
+      return sk.active;
     return false;
   }
 

From 3dc85db689abdc1cd4feb17b9a28a67d52983b56 Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 17:30:18 +0200
Subject: [PATCH 17/26] camelcase

---
 Step/wwwroot/src/filters/securityFilter.ts | 8 ++++----
 Step/wwwroot/src/modules/app-header.ts     | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Step/wwwroot/src/filters/securityFilter.ts b/Step/wwwroot/src/filters/securityFilter.ts
index 000e23c6..328799fb 100644
--- a/Step/wwwroot/src/filters/securityFilter.ts
+++ b/Step/wwwroot/src/filters/securityFilter.ts
@@ -12,7 +12,7 @@ Vue.filter("checkSecurityDisabled", function (key: string): boolean {
     return true;
   }
 
-  return !securityFunction.Enabled;
+  return !securityFunction.enabled;
 });
 
 
@@ -26,7 +26,7 @@ Vue.filter("checkSecurityEnabled", function (key: string): boolean {
     return false;
   }
 
-  return securityFunction.Enabled;
+  return securityFunction.enabled;
 });
 
 
@@ -47,7 +47,7 @@ Vue.mixin({
         return false;
       }
 
-      return securityFunction.Enabled;
+      return securityFunction.enabled;
     },
 
     checkSecurityDisabled(key: string): boolean {
@@ -59,7 +59,7 @@ Vue.mixin({
           return true;
         }
 
-        return !securityFunction.Enabled;
+        return !securityFunction.enabled;
     }
 
   }
diff --git a/Step/wwwroot/src/modules/app-header.ts b/Step/wwwroot/src/modules/app-header.ts
index 331bfe24..74f3e744 100644
--- a/Step/wwwroot/src/modules/app-header.ts
+++ b/Step/wwwroot/src/modules/app-header.ts
@@ -90,8 +90,8 @@ export default class AppHeader extends Vue {
   }
 
   public manageClick(btn: buttonStatus) {
-    if (btn.Clickable)
-      Hub.Current.sendPowerCommand(btn.Id);
+    if (btn.clickable)
+      Hub.Current.sendPowerCommand(btn.id);
   }
 
 }

From 5a7a357f0b5b89e7ad43db54feb82c761b6186e1 Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Mon, 9 Apr 2018 17:41:17 +0200
Subject: [PATCH 18/26] camelcase

---
 Step/wwwroot/src/components/under-the-hood.vue       |  6 +++---
 Step/wwwroot/src/filters/securityFilter.ts           |  8 ++++----
 .../wwwroot/src/modules/under-the-hood/auto-menu.vue |  4 ++--
 Step/wwwroot/src/modules/under-the-hood/jog-menu.vue |  8 ++++----
 .../src/modules/under-the-hood/process-selection.vue |  6 +++---
 Step/wwwroot/src/store/machineStatus.store.ts        | 12 ++++++------
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/Step/wwwroot/src/components/under-the-hood.vue b/Step/wwwroot/src/components/under-the-hood.vue
index 1e1a3fcd..859232d8 100644
--- a/Step/wwwroot/src/components/under-the-hood.vue
+++ b/Step/wwwroot/src/components/under-the-hood.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="back-view">
-    <header>      
+    <header>
       <span v-if="isSiemens">Siemens HMI</span>
       <span v-if="isFanuc">Fanuc HMI</span>
       <span v-if="isOsai">Osai HMI</span>
@@ -67,14 +67,14 @@ export default {
       let ref = this.$store.getters.getNcSoftKeyStatus(5);
       let jog = this.$store.getters.getNcSoftKeyStatus(6);
       let joginc = this.$store.getters.getNcSoftKeyStatus(7);
-      return ((ref && ref.Value) || (jog && jog.Value) || (joginc && joginc.Value));
+      return ((ref && ref.value) || (jog && jog.value) || (joginc && joginc.value));
       return false;
     },
     showAuto: function(){
       let auto = this.$store.getters.getNcSoftKeyStatus(1);
       let mdi = this.$store.getters.getNcSoftKeyStatus(2);
       let edit = this.$store.getters.getNcSoftKeyStatus(3);
-      return ((auto && auto.Value) || (mdi && mdi.Value) || (edit && edit.Value));
+      return ((auto && auto.value) || (mdi && mdi.value) || (edit && edit.value));
       return false;
     }
   },
diff --git a/Step/wwwroot/src/filters/securityFilter.ts b/Step/wwwroot/src/filters/securityFilter.ts
index 328799fb..72da2e80 100644
--- a/Step/wwwroot/src/filters/securityFilter.ts
+++ b/Step/wwwroot/src/filters/securityFilter.ts
@@ -5,7 +5,7 @@ import { store, LocalizationModel, AppModel } from "src/store";
 Vue.filter("checkSecurityDisabled", function (key: string): boolean {
 
   if (!store) return true;
-  let securityFunction = (store.state as any).machineStatus.functions.find(i => i.Name == key)  as signalr_security.securityFunction;
+  let securityFunction = (store.state as any).machineStatus.functions.find(i => i.name == key)  as signalr_security.securityFunction;
 
   if (!securityFunction) {
     console.debug("Security function not found", key);
@@ -19,7 +19,7 @@ Vue.filter("checkSecurityDisabled", function (key: string): boolean {
 Vue.filter("checkSecurityEnabled", function (key: string): boolean {
 
   if (!store) return false;
-  let securityFunction = (store.state as any).machineStatus.functions.find(i => i.Name == key)  as signalr_security.securityFunction;
+  let securityFunction = (store.state as any).machineStatus.functions.find(i => i.name == key)  as signalr_security.securityFunction;
 
   if (!securityFunction) {
     console.debug("Security function not found", key);
@@ -40,7 +40,7 @@ Vue.mixin({
 
     checkSecurityEnabled(key:string): boolean {
       if (!store) return false;
-      let securityFunction = (store.state as any).machineStatus.functions.find(i => i.Name == key)  as signalr_security.securityFunction;
+      let securityFunction = (store.state as any).machineStatus.functions.find(i => i.name == key)  as signalr_security.securityFunction;
 
       if (!securityFunction) {
         console.debug("Security function not found", key);
@@ -53,7 +53,7 @@ Vue.mixin({
     checkSecurityDisabled(key: string): boolean {
 
         if (!store) return true;
-        let securityFunction = (store.state as any).machineStatus.functions.find(i => i.Name == key)  as signalr_security.securityFunction;
+        let securityFunction = (store.state as any).machineStatus.functions.find(i => i.name == key)  as signalr_security.securityFunction;
         if (!securityFunction) {
           console.debug("Security function not found", key);
           return true;
diff --git a/Step/wwwroot/src/modules/under-the-hood/auto-menu.vue b/Step/wwwroot/src/modules/under-the-hood/auto-menu.vue
index a1c52f75..3a78a588 100644
--- a/Step/wwwroot/src/modules/under-the-hood/auto-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/auto-menu.vue
@@ -25,12 +25,12 @@ export default {
     },
     isKeyActive(id) {
       let r = this.$store.getters.getNcSoftKeyStatus(id);
-      if (r) return r.Active;
+      if (r) return r.active;
       return false;
     },
     isKeySelected(id) {
       let r = this.$store.getters.getNcSoftKeyStatus(id);
-      if (r) return r.Value;
+      if (r) return r.value;
       return false;
     },
   },
diff --git a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
index 8aa1ef18..4dcdd6df 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -13,10 +13,10 @@
 
     <div class="axes-menu-container" v-if="showAxesMenu">
       <div class="menu">
-        <button @click="setAxes(a.Id)"
+        <button @click="setAxes(a.id)"
                 v-for="a in axes"
-                :key="a.Id"
-                :class="{active: a.Id == selectedAxisId}">{{a.Name}}</button>
+                :key="a.id"
+                :class="{active: a.id == selectedAxisId}">{{a.Name}}</button>
       </div>
     </div>
 
@@ -101,7 +101,7 @@ export default {
       let id = this.$store.state.process.selectedAxis;
       for (const k in this.$store.state.process.axes) {
         let a = this.$store.state.process.axes[k];
-        if (a.Id == id) return a.Name;
+        if (a.id == id) return a.Name;
       }
       return null;
     }
diff --git a/Step/wwwroot/src/modules/under-the-hood/process-selection.vue b/Step/wwwroot/src/modules/under-the-hood/process-selection.vue
index 7b898b7f..1054c32e 100644
--- a/Step/wwwroot/src/modules/under-the-hood/process-selection.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/process-selection.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="process-selection" v-if="processes.length > 1 && checkSecurityEnabled('processCmd')">
-  <div class="process" v-for="p in processes" :key="p.Id" :class="{selected: p.Id == selectedProcess}" @click="selectProcess(p.Id)">
-    <span>{{p.Id}}</span>
-    <small v-if="p.Type == 'AUX'">AUX</small>
+  <div class="process" v-for="p in processes" :key="p.id" :class="{selected: p.id == selectedProcess}" @click="selectProcess(p.id)">
+    <span>{{p.id}}</span>
+    <small v-if="p.type == 'AUX'">AUX</small>
   </div>
 </div>
 
diff --git a/Step/wwwroot/src/store/machineStatus.store.ts b/Step/wwwroot/src/store/machineStatus.store.ts
index 7aad8643..90fa53e1 100644
--- a/Step/wwwroot/src/store/machineStatus.store.ts
+++ b/Step/wwwroot/src/store/machineStatus.store.ts
@@ -129,19 +129,19 @@ export const machineStatusStore = {
     },
     getSoftKeyStatus: state => id => {
       for (const key in state.softKeys) {
-        if (state.softKeys[key].Id == id) return state.softKeys[key];
+        if (state.softKeys[key].id == id) return state.softKeys[key];
       }
       return null;
     },
     getNcSoftKeyStatus: state => id => {
       for (const key in state.ncSoftKeys) {
-        if (state.ncSoftKeys[key].Id == id) return state.ncSoftKeys[key];
+        if (state.ncSoftKeys[key].id == id) return state.ncSoftKeys[key];
       }
       return null;
     },
     getHeadsProperty: state => id => {
       for (const key in state.headsProperty) {
-        if (state.headsProperty[key].Id == id) return state.headsProperty[key];
+        if (state.headsProperty[key].id == id) return state.headsProperty[key];
       }
       return null;
     }
@@ -160,16 +160,16 @@ export const machineStatusStore = {
       }
     },
     SetSoftKeyStatus(store, model: any) {
-      store._softKeys.set(model.Id, model);
+      store._softKeys.set(model.id, model);
       store.softKeys = Array.from(store._softKeys.values());
     },
     SetNCSoftKeyStatus(store, model: any) {
-      store._ncSoftKeys.set(model.Id, model);
+      store._ncSoftKeys.set(model.id, model);
       store.ncSoftKeys = Array.from(store._ncSoftKeys.values());
     },
     SetHeadsProperty(store, model) {
 
-      store._headsProperty.set(model.id || model.Id, model);
+      store._headsProperty.set(model.id, model);
       store.headsProperty = Array.from(store._headsProperty.values());
     }
   },

From 58b4f24ee6e0dc14999200c8efe3d2e065813b58 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 08:31:37 +0200
Subject: [PATCH 19/26] Heads & Jog Menu Fix

---
 Step/wwwroot/src/modules/mheads.vue           | 24 +++++++++----------
 .../src/modules/under-the-hood/jog-menu.vue   |  4 ++--
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/Step/wwwroot/src/modules/mheads.vue b/Step/wwwroot/src/modules/mheads.vue
index 98f3499c..25707379 100644
--- a/Step/wwwroot/src/modules/mheads.vue
+++ b/Step/wwwroot/src/modules/mheads.vue
@@ -1,20 +1,20 @@
 <template>
 <div class="heads-container scrollable_auto" :class="{'heads-container-lt4':(heads.length <=4)}">
   <head-std :title="h.name" v-for="h in heads" :key="h.id"
-            :rpm="getHeadsProperty(h.id).ActualSpeed"
-            :tool="getHeadsProperty(h.id).MountedTool"
-            :load="getHeadsProperty(h.id).Load"
-            :process="getHeadsProperty(h.id).Process"
-            :type="getHeadsProperty(h.id).Type"
+            :rpm="getHeadsProperty(h.id).actualSpeed"
+            :tool="getHeadsProperty(h.id).mountedTool"
+            :load="getHeadsProperty(h.id).load"
+            :process="getHeadsProperty(h.id).process"
+            :type="getHeadsProperty(h.id).type"
             :inAlarm="getHeadsProperty(h.id).inAlarm"
             :inWarning="getHeadsProperty(h.id).inWarning"
-            :percentage="getHeadsProperty(h.id).Override"
-            :abrasive="getHeadsProperty(h.id).Abrasive"
-            :vacuum="getHeadsProperty(h.id).Vacum"
-            :overrideDisabled="!getHeadsProperty(h.id).OverrideEditable"
-            :pressure="getHeadsProperty(h.id).ActualPressure"
-            :isSelected="getHeadsProperty(h.id).IsSelected"
-            :isActive="getHeadsProperty(h.id).IsActive"
+            :percentage="getHeadsProperty(h.id).override"
+            :abrasive="getHeadsProperty(h.id).abrasive"
+            :vacuum="getHeadsProperty(h.id).vacum"
+            :overrideDisabled="!getHeadsProperty(h.id).overrideEditable"
+            :pressure="getHeadsProperty(h.id).actualPressure"
+            :isSelected="getHeadsProperty(h.id).isSelected"
+            :isActive="getHeadsProperty(h.id).isActive"
             @overridePlus="overridePlus(h.id)" @overrideMinus="overrideMinus(h.id)"
             ></head-std>
    <div class="head-place-holder" v-if="heads.length <4"></div>
diff --git a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
index 4dcdd6df..558f9be4 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -81,12 +81,12 @@ export default {
     },
     isKeyActive(id) {
       let r = this.$store.getters.getNcSoftKeyStatus(id);
-      if (r) return r.Active;
+      if (r) return r.active;
       return false;
     },
     isKeySelected(id) {
       let r = this.$store.getters.getNcSoftKeyStatus(id);
-      if (r) return r.Value;
+      if (r) return r.value;
       return false;
     },
     toggleAxes() {

From b8810e34daf057ee7054ae2a5dc34e94959d47de Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 08:43:35 +0200
Subject: [PATCH 20/26] Processes & Startup-Icons fix

---
 Step/wwwroot/src/@types/signalr.process.d.ts  | 18 ++++-----
 Step/wwwroot/src/modules/app-header.vue       | 38 +++++++++----------
 Step/wwwroot/src/services/hub.ts              |  4 +-
 .../wwwroot/src/store/runningProcess.store.ts |  6 +--
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/Step/wwwroot/src/@types/signalr.process.d.ts b/Step/wwwroot/src/@types/signalr.process.d.ts
index a68e195f..a435092c 100644
--- a/Step/wwwroot/src/@types/signalr.process.d.ts
+++ b/Step/wwwroot/src/@types/signalr.process.d.ts
@@ -7,18 +7,18 @@ declare module signalr_process {
   }
 
   interface ProcessData {
-    Id: number;
-    Type: string;
-    IsInAlarm: boolean;
-    PartProgramName: string;
-    Status: string;
-    Visible: boolean;
-    Reps: number;
+    id: number;
+    type: string;
+    isInAlarm: boolean;
+    partProgramName: string;
+    status: string;
+    risible: boolean;
+    reps: number;
   }
 
   interface AxisData{
-    Id:number;
-    Name: string;
+    id:number;
+    name: string;
 
   }
 
diff --git a/Step/wwwroot/src/modules/app-header.vue b/Step/wwwroot/src/modules/app-header.vue
index ea3e17ea..19aba57f 100644
--- a/Step/wwwroot/src/modules/app-header.vue
+++ b/Step/wwwroot/src/modules/app-header.vue
@@ -24,37 +24,37 @@
     <button :class="{ red: mainStatus, blue: !mainStatus }">
       <img class="h-24" src="assets/icons/png/switch-icon@2x.png">
     </button>
-    <button class="power-on" :disabled="!state.powerOnAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.powerOnAlarm && state.powerOnAlarm.Active" @click="manageClick(state.powerOnAlarm)"><img src="assets/icons/png/control-icon-error@2x.png"></button>
+    <button class="power-on" :disabled="!state.powerOnAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.powerOnAlarm && state.powerOnAlarm.active" @click="manageClick(state.powerOnAlarm)"><img src="assets/icons/png/control-icon-error@2x.png"></button>
 
-    <button class="airflow" :disabled="!state.airPressureAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.airPressureAlarm && state.airPressureAlarm.Active" @click="manageClick(state.airPressureAlarm)"><img src="assets/icons/png/air-icon@2x.png"></button>
+    <button class="airflow" :disabled="!state.airPressureAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.airPressureAlarm && state.airPressureAlarm.active" @click="manageClick(state.airPressureAlarm)"><img src="assets/icons/png/air-icon@2x.png"></button>
 
-    <button class="protections" :disabled="!state.protectionsAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.protectionsAlarm && state.protectionsAlarm.Active" @click="manageClick(state.protectionsAlarm)"><img src="assets/icons/png/lock-icon-error@2x.png"></button>
+    <button class="protections" :disabled="!state.protectionsAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.protectionsAlarm && state.protectionsAlarm.active" @click="manageClick(state.protectionsAlarm)"><img src="assets/icons/png/lock-icon-error@2x.png"></button>
 
-    <button class="emergency" :disabled="!state.emergencyAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.emergencyAlarm && state.emergencyAlarm.Active" @click="manageClick(state.emergencyAlarm)"><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
+    <button class="emergency" :disabled="!state.emergencyAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.emergencyAlarm && state.emergencyAlarm.active" @click="manageClick(state.emergencyAlarm)"><img src="assets/icons/png/refresh-icon-error@2x.png"></button>
 
-    <button class="settings-mode" :disabled="!state.settingsModeAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.settingsModeAlarm && state.settingsModeAlarm.Active" @click="manageClick(state.settingsModeAlarm)"><img src="assets/icons/png/no-settings@2x.png"></button>
+    <button class="settings-mode" :disabled="!state.settingsModeAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.settingsModeAlarm && state.settingsModeAlarm.active" @click="manageClick(state.settingsModeAlarm)"><img src="assets/icons/png/no-settings@2x.png"></button>
 
-    <button class="key" :disabled="!state.keyReadyAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.keyReadyAlarm && state.keyReadyAlarm.Active" @click="manageClick(state.keyReadyAlarm)"><img src="assets/icons/png/key-icon-error@2x.png"></button>
+    <button class="key" :disabled="!state.keyReadyAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.keyReadyAlarm && state.keyReadyAlarm.active" @click="manageClick(state.keyReadyAlarm)"><img src="assets/icons/png/key-icon-error@2x.png"></button>
 
     <button :class="{ red: powerOnStatus, blue: !powerOnStatus }">
       <img src="assets/icons/png/ok-white.png" class="h-20" v-if="!powerOnStatus">
       <img src="assets/icons/png/not-ok-white.png" class="h-20" v-if="powerOnStatus">
       </button>
-    <button class="key" :disabled="!state.resetAxesAlarm.Clickable || checkSecurityDisabled('startupIcons')"
-            v-if="state.resetAxesAlarm && state.resetAxesAlarm.Active"
+    <button class="key" :disabled="!state.resetAxesAlarm.clickable || checkSecurityDisabled('startupIcons')"
+            v-if="state.resetAxesAlarm && state.resetAxesAlarm.active"
             @click="manageClick(state.resetAxesAlarm)"><img src="assets/icons/png/taratura-icon-error@2x.png"></button>
-    <button class="key" :disabled="!state.waterJet1Alarm.Clickable || checkSecurityDisabled('startupIcons')" v-if="state.waterJet1Alarm && state.waterJet1Alarm.Active"  @click="manageClick(state.waterJet1Alarm)"></button>
-    <button class="key" :disabled="!state.waterJet2Alarm.Clickable || checkSecurityDisabled('startupIcons')" v-if="state.waterJet2Alarm && state.waterJet2Alarm.Active"  @click="manageClick(state.waterJet2Alarm)"></button>
+    <button class="key" :disabled="!state.waterJet1Alarm.clickable || checkSecurityDisabled('startupIcons')" v-if="state.waterJet1Alarm && state.waterJet1Alarm.active"  @click="manageClick(state.waterJet1Alarm)"></button>
+    <button class="key" :disabled="!state.waterJet2Alarm.clickable || checkSecurityDisabled('startupIcons')" v-if="state.waterJet2Alarm && state.waterJet2Alarm.active"  @click="manageClick(state.waterJet2Alarm)"></button>
     <div class="process-container">
-      <process-info v-for="p in processes" :key="p.id" v-if="p.Visible && !mainStatus"
-                    :counter="p.Reps" :status="p.Status" :id="p.Id">
-        <strong>{{p.PartProgramName}}</strong>
+      <process-info v-for="p in processes" :key="p.id" v-if="p.visible && !mainStatus"
+                    :counter="p.reps" :status="p.status" :id="p.id">
+        <strong>{{p.partProgramName}}</strong>
       </process-info>
     </div>
 
diff --git a/Step/wwwroot/src/services/hub.ts b/Step/wwwroot/src/services/hub.ts
index d4401184..db64bb35 100644
--- a/Step/wwwroot/src/services/hub.ts
+++ b/Step/wwwroot/src/services/hub.ts
@@ -116,7 +116,7 @@ export class Hub {
     processModelActions.isRunning(store, data.isRunning);
     processModelActions.selectProcess(store, data.selectedProcess);
     processModelActions.selectAxis(store, data.selectedAxis);
-    processModelActions.checkRemove(store, processes.map(i => i.Id));
+    processModelActions.checkRemove(store, processes.map(i => i.id));
   }
 
   private static ncSoftKeyChanged(status) {
@@ -170,7 +170,7 @@ export class Hub {
         }
       }
 
-      processModelActions.checkRemove(store, status.processes.map(i => i.Id));
+      processModelActions.checkRemove(store, status.processes.map(i => i.id));
     }
   }
 
diff --git a/Step/wwwroot/src/store/runningProcess.store.ts b/Step/wwwroot/src/store/runningProcess.store.ts
index e5a9a715..d4ef3d48 100644
--- a/Step/wwwroot/src/store/runningProcess.store.ts
+++ b/Step/wwwroot/src/store/runningProcess.store.ts
@@ -32,12 +32,12 @@ export const processStore = {
       store.axes = data;
     },
     AddProcess(store, process: signalr_process.ProcessData) {
-      store._process.set(process.Id, process);
+      store._process.set(process.id, process);
       store.process = Array.from(store._process.values());
     },
     RemoveProcess(store, process: signalr_process.ProcessData) {
-      if (store._process.has(process.Id))
-        store._process.delete(process.Id);
+      if (store._process.has(process.id))
+        store._process.delete(process.id);
 
       store.process = Array.from(store._process.values());
     },

From 24a7e39493bb27ac752f79ae81c874dec53e4dce Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 09:00:17 +0200
Subject: [PATCH 21/26] Axes Fix

---
 Step/wwwroot/src/modules/under-the-hood/jog-menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
index 558f9be4..cb06cc4c 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -16,7 +16,7 @@
         <button @click="setAxes(a.id)"
                 v-for="a in axes"
                 :key="a.id"
-                :class="{active: a.id == selectedAxisId}">{{a.Name}}</button>
+                :class="{active: a.id == selectedAxisId}">{{a.name}}</button>
       </div>
     </div>
 

From 6341acf6a839e330a070a79ab86ac4ee5f72e398 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 09:13:42 +0200
Subject: [PATCH 22/26] Fix Axis Select

---
 Step/wwwroot/src/modules/under-the-hood/jog-menu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
index cb06cc4c..f63f99b7 100644
--- a/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
+++ b/Step/wwwroot/src/modules/under-the-hood/jog-menu.vue
@@ -101,7 +101,7 @@ export default {
       let id = this.$store.state.process.selectedAxis;
       for (const k in this.$store.state.process.axes) {
         let a = this.$store.state.process.axes[k];
-        if (a.id == id) return a.Name;
+        if (a.id == id) return a.name;
       }
       return null;
     }

From 130f2ab48e899220c62e5391b57eaeb0b7873cac Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 12:14:20 +0200
Subject: [PATCH 23/26] Fix Render processes inside alarms

---
 Step/wwwroot/assets/styles/base/alarms.less   | 19 ++++++++----
 Step/wwwroot/assets/styles/base/ribbons.less  | 24 ++++++---------
 Step/wwwroot/assets/styles/style.css          | 30 ++++++++++++-------
 Step/wwwroot/src/@types/signalr.alarms.d.ts   |  6 +++-
 .../src/modules/alarms/alarm-detail.vue       |  6 +++-
 .../wwwroot/src/modules/alarms/alarm-item.vue | 13 ++++++--
 Step/wwwroot/src/modules/app-header.vue       |  8 +++--
 7 files changed, 69 insertions(+), 37 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less
index d9b27d17..373fcef8 100644
--- a/Step/wwwroot/assets/styles/base/alarms.less
+++ b/Step/wwwroot/assets/styles/base/alarms.less
@@ -68,6 +68,12 @@
         height: 100%;
         &.warning {
             color: @color-greyish-brown;
+            .sources {
+                span.source {
+                    border: 1px solid @color-greyish-brown !important;
+                    color: @color-greyish-brown;
+                }
+            }
         }
         & h2 {
             // height: 21px;
@@ -86,6 +92,7 @@
             }
         }
         .sources {
+            margin-top: 10px;
             span.source {
                 font-size: 14px;
                 float: left;
@@ -97,6 +104,7 @@
                 padding: 0 5px;
                 line-height: 20px;
                 margin-bottom: 3px;
+                margin-right: 5px;
             }
             &:after {
                 content: " ";
@@ -186,15 +194,16 @@
                 flex-flow: row;
                 justify-content: space-between;
             }
-            span {
+            .sourcecontainer {
                 font-size: 14px;
-                padding: 0 5px;
-                float: left;
                 display: block;
-                margin: 0 3px;
-                border: 1px solid @color-warm-grey !important;
                 color: @color-greyish-brown ;
                 font-weight: 600;
+                .source {
+                    border: 1px solid @color-warm-grey !important;
+                    padding: 0 5px;
+                    margin-right: 3px;
+                }
             }
         }
         button {
diff --git a/Step/wwwroot/assets/styles/base/ribbons.less b/Step/wwwroot/assets/styles/base/ribbons.less
index 8cd6873e..85042e8c 100644
--- a/Step/wwwroot/assets/styles/base/ribbons.less
+++ b/Step/wwwroot/assets/styles/base/ribbons.less
@@ -58,14 +58,12 @@
                 .processes {
                     display: flex;
                     flex-flow: row;
-                    span {
-                        font-size: 14px;
-                        padding: 0 5px;
-                        border: 1px solid #fff;
-                        float: left;
-                        display: block;
-                        margin: 0 3px;
-                    }
+                    font-size: 14px;
+                    padding: 0 5px;
+                    border: 1px solid #fff;
+                    float: left;
+                    display: block;
+                    margin: 0 3px;
                 }
             }
         }
@@ -175,11 +173,9 @@
           color: #fff;
       }
       .processes {
-          span {
               border: 1px solid @color-warm-grey !important;
               color: @color-greyish-brown ;
               font-weight: 600;
-          }
       }
   }
 }
@@ -199,11 +195,9 @@
             color: #fff;
         }
         .processes {
-            span {
-                border: 1px solid @color-warm-grey !important;
-                color: @color-greyish-brown ;
-                font-weight: 600;
-            }
+            border: 1px solid @color-warm-grey !important;
+            color: @color-greyish-brown ;
+            font-weight: 600;
         }
     }
 }
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 82e14599..903aa04d 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -792,8 +792,6 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
 .ribbon-container .app-ribbon .status-content .content .processes {
   display: flex;
   flex-flow: row;
-}
-.ribbon-container .app-ribbon .status-content .content .processes span {
   font-size: 14px;
   padding: 0 5px;
   border: 1px solid #fff;
@@ -900,7 +898,7 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
   background-color: #d0021b;
   color: #fff;
 }
-.app-ribbon.alarm.big.opened .processes span {
+.app-ribbon.alarm.big.opened .processes {
   border: 1px solid #878787 !important;
   color: #4b4b4b;
   font-weight: 600;
@@ -921,7 +919,7 @@ fieldset[disabled] .form-group.is-focused .togglebutton label {
   background-color: #f5a623;
   color: #fff;
 }
-.app-ribbon.warning.opened .processes span {
+.app-ribbon.warning.opened .processes {
   border: 1px solid #878787 !important;
   color: #4b4b4b;
   font-weight: 600;
@@ -1215,6 +1213,11 @@ footer .container button.big:before {
 #service-list .alarm-detail.content.warning {
   color: #4b4b4b;
 }
+#alarm-list .alarm-detail.content.warning .sources span.source,
+#service-list .alarm-detail.content.warning .sources span.source {
+  border: 1px solid #4b4b4b !important;
+  color: #4b4b4b;
+}
 #alarm-list .alarm-detail.content h2,
 #service-list .alarm-detail.content h2 {
   font-size: 18px;
@@ -1233,6 +1236,10 @@ footer .container button.big:before {
 #service-list .alarm-detail.content .general-buttons .btn {
   font-size: 16px;
 }
+#alarm-list .alarm-detail.content .sources,
+#service-list .alarm-detail.content .sources {
+  margin-top: 10px;
+}
 #alarm-list .alarm-detail.content .sources span.source,
 #service-list .alarm-detail.content .sources span.source {
   font-size: 14px;
@@ -1245,6 +1252,7 @@ footer .container button.big:before {
   padding: 0 5px;
   line-height: 20px;
   margin-bottom: 3px;
+  margin-right: 5px;
 }
 #alarm-list .alarm-detail.content .sources:after,
 #service-list .alarm-detail.content .sources:after {
@@ -1347,17 +1355,19 @@ footer .container button.big:before {
   flex-flow: row;
   justify-content: space-between;
 }
-#alarm-list .alarm-item .content span,
-#service-list .alarm-item .content span {
+#alarm-list .alarm-item .content .sourcecontainer,
+#service-list .alarm-item .content .sourcecontainer {
   font-size: 14px;
-  padding: 0 5px;
-  float: left;
   display: block;
-  margin: 0 3px;
-  border: 1px solid #878787 !important;
   color: #4b4b4b;
   font-weight: 600;
 }
+#alarm-list .alarm-item .content .sourcecontainer .source,
+#service-list .alarm-item .content .sourcecontainer .source {
+  border: 1px solid #878787 !important;
+  padding: 0 5px;
+  margin-right: 3px;
+}
 #alarm-list .alarm-item button,
 #service-list .alarm-item button {
   cursor: pointer;
diff --git a/Step/wwwroot/src/@types/signalr.alarms.d.ts b/Step/wwwroot/src/@types/signalr.alarms.d.ts
index 80fb4c8f..91841915 100644
--- a/Step/wwwroot/src/@types/signalr.alarms.d.ts
+++ b/Step/wwwroot/src/@types/signalr.alarms.d.ts
@@ -18,9 +18,13 @@ declare module signalr_alarms {
     process: number,
   }
 
+  interface plcAlarm extends genericAlarm {
+    process: Array<number>,
+  }
+
   interface alarmMessage {
     ncAlarms: Array<genericAlarm>,
-    plcAlarms: Array<genericAlarm>,
+    plcAlarms: Array<plcAlarm>,
     processAlarms: Array<processAlarm>,
   }
 
diff --git a/Step/wwwroot/src/modules/alarms/alarm-detail.vue b/Step/wwwroot/src/modules/alarms/alarm-detail.vue
index b7d87e19..781ff233 100644
--- a/Step/wwwroot/src/modules/alarms/alarm-detail.vue
+++ b/Step/wwwroot/src/modules/alarms/alarm-detail.vue
@@ -3,7 +3,11 @@
     <h2 v-if="alarm.title">{{alarm.title}}</h2>
     <h2 v-if="!alarm.title">{{'alarm_'+ alarm.id | localize('alarm_'+ alarm.id)}}</h2>
     <div class="sources" v-if="alarm.source">
-      <span class="source">{{alarm.process}} {{alarm.source}}</span>
+      <span class="source">{{alarm.source}}</span>
+      <span class="source" v-if="alarm.source === 'PLC' && alarm.process.length>0">
+            <span v-for="p in alarm.process" :key="p" >{{ p }} </span>
+      </span>
+      <span class="source" v-if="alarm.source !== 'PLC' && alarm.process">{{ alarm.process }}</span>        
     </div>
     <time>{{alarm.date | date("DD/MM/YYYY - hh:mm")}}</time>
     <span class="summary">{{alarm.description}}</span>
diff --git a/Step/wwwroot/src/modules/alarms/alarm-item.vue b/Step/wwwroot/src/modules/alarms/alarm-item.vue
index f312bbd7..60695d63 100644
--- a/Step/wwwroot/src/modules/alarms/alarm-item.vue
+++ b/Step/wwwroot/src/modules/alarms/alarm-item.vue
@@ -3,10 +3,17 @@
     <div class="content">
       <h2 v-if="title.length>0">{{title}}</h2>
       <h2 v-if="!title || title.length==0">{{'alarm_'+ alarmid | localize('alarm_'+ alarmid)}}</h2>
-      <div class="summary">
-        <span v-if="source">{{source}} {{processid}}</span>
-
+      <div class="summary" v-if="source">
         <time>{{dateprefix}} {{date | date("DD/MM/YYYY HH:mm")}}</time>
+      </div>        
+      <div class="summary" v-if="source">
+        <span class="sourcecontainer">
+          <span class="source">{{source}}</span>
+          <span class="source" v-if="source === 'PLC' && processid.length>0">
+                <span v-for="p in processid" :key="p" >{{ p }} </span>
+          </span>
+          <span class="source" v-if="source !== 'PLC' && processid">{{ processid }}</span>
+        </span>
       </div>
     </div>
     <button class="btn" @click="showDetail">{{'alarm_item_btn_show' | localize('Vedi')}}</button>
diff --git a/Step/wwwroot/src/modules/app-header.vue b/Step/wwwroot/src/modules/app-header.vue
index 19aba57f..bd90f699 100644
--- a/Step/wwwroot/src/modules/app-header.vue
+++ b/Step/wwwroot/src/modules/app-header.vue
@@ -11,8 +11,12 @@
         <strong v-if="!showDetails">{{alarmTitle | localize(alarmTitle,alarmCount)}}</strong>
         <strong v-if="showDetails && alarms[0].title">{{alarms[0].title}}</strong>
         <strong v-if="showDetails && !alarms[0].title">{{'alarm_'+ alarms[0].id | localize('alarm_'+ alarms[0].id)}}</strong>
-        <div class="processes" v-if="showDetails">
-          <span>{{alarms[0].process}} {{alarms[0].source}}</span>
+        <div v-if="showDetails">
+          <span class="processes">{{alarms[0].source}}</span>
+          <span class="processes" v-if="alarms[0].source === 'PLC' && alarms[0].process.length>0">
+                <span v-for="p in alarms[0].process" :key="p" >{{ p }} </span>
+          </span>
+          <span class="processes" v-if="alarms[0].source !== 'PLC' && alarms[0].process">{{ alarms[0].process }}</span>
         </div>
       </div>
       <div slot="service" class="content" v-if="serviceRequired">

From 329b21f28a0fa23b99690cde41888139910c8f6d Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 16:24:59 +0200
Subject: [PATCH 24/26] Fix Maintenance DateTime View

---
 Step/wwwroot/src/modules/alarms/alarm-item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Step/wwwroot/src/modules/alarms/alarm-item.vue b/Step/wwwroot/src/modules/alarms/alarm-item.vue
index 60695d63..9d0c0fb4 100644
--- a/Step/wwwroot/src/modules/alarms/alarm-item.vue
+++ b/Step/wwwroot/src/modules/alarms/alarm-item.vue
@@ -3,7 +3,7 @@
     <div class="content">
       <h2 v-if="title.length>0">{{title}}</h2>
       <h2 v-if="!title || title.length==0">{{'alarm_'+ alarmid | localize('alarm_'+ alarmid)}}</h2>
-      <div class="summary" v-if="source">
+      <div class="summary">
         <time>{{dateprefix}} {{date | date("DD/MM/YYYY HH:mm")}}</time>
       </div>        
       <div class="summary" v-if="source">

From 94b0fe0ea782c1301db2a85da310a88212ad25d0 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 16:50:54 +0200
Subject: [PATCH 25/26] Removed box-shadow on alarm-list transition (Speedup on
 slow PC)

---
 Step/wwwroot/assets/styles/base/alarms.less | 7 ++++---
 Step/wwwroot/assets/styles/style.css        | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less
index 373fcef8..df581ec0 100644
--- a/Step/wwwroot/assets/styles/base/alarms.less
+++ b/Step/wwwroot/assets/styles/base/alarms.less
@@ -9,20 +9,21 @@
     top: 40px;
     background-color: #fff;
     padding: 0 0;
-    transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out;
     z-index: 150;
-    box-shadow: @color-alarm-list-shadow;
     box-sizing: border-box;
     display: flex;
     flex-wrap: nowrap;
     overflow: hidden;
+    transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out,box-shadow 0ms 0ms;
     &.expanded {
         width: 494px;
         padding: 0 24px;
     }
     &.expanded.opened {
         padding: 72px 24px 24px 0px;
-        height: calc(~"100vh - 120px");
+        height: calc(~"100vh - 120px");        
+        box-shadow: @color-alarm-list-shadow;
+        transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out,box-shadow 20ms 180ms;
     }
     &.alarm {
         background-color: @color-faded-red;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 903aa04d..5a686a18 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -1144,13 +1144,12 @@ footer .container button.big:before {
   top: 40px;
   background-color: #fff;
   padding: 0 0;
-  transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out;
   z-index: 150;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
   box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
   overflow: hidden;
+  transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 0ms 0ms;
 }
 #alarm-list.expanded,
 #service-list.expanded {
@@ -1161,6 +1160,8 @@ footer .container button.big:before {
 #service-list.expanded.opened {
   padding: 72px 24px 24px 0px;
   height: calc(100vh - 120px);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  transition: width 200ms ease-in-out, height 200ms ease-in-out, padding 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 20ms 180ms;
 }
 #alarm-list.alarm,
 #service-list.alarm {

From ccbf3862393b14847e33ec83b37e40182a2381e2 Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Tue, 10 Apr 2018 17:19:48 +0200
Subject: [PATCH 26/26] Fix Vendor-Hmi Behaviour on alarm-clean

---
 .../wwwroot/src/modules/base-components/ribbons/app-ribbon.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Step/wwwroot/src/modules/base-components/ribbons/app-ribbon.vue b/Step/wwwroot/src/modules/base-components/ribbons/app-ribbon.vue
index 9bbd6aee..70e16ad8 100644
--- a/Step/wwwroot/src/modules/base-components/ribbons/app-ribbon.vue
+++ b/Step/wwwroot/src/modules/base-components/ribbons/app-ribbon.vue
@@ -40,7 +40,7 @@ export default {
         Factory.Get(MessageService).publishToChannel("HMI-hide-alarms",300);
     },
     status:function()  {
-      if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
+      if((this.expanded && this.$store.state.alarms.opened) || (this.hasService && this.$store.state.alarms.serviceOpened))
         Factory.Get(MessageService).publishToChannel("HMI-show-alarms");
       else
         Factory.Get(MessageService).publishToChannel("HMI-hide-alarms",300);
@@ -77,7 +77,6 @@ export default {
         this.serviceExpanded = false;
         alarmsModelActions.toggleServiceOpened(this.$store, false);
 
-
         if(this.$store.state.alarms.opened || this.$store.state.alarms.serviceOpened)
           Factory.Get(MessageService).publishToChannel("HMI-show-alarms");
         else