From a411613f2766719f3dab29ed73fc2e8b04f8bd6e Mon Sep 17 00:00:00 2001
From: widlam <mikolaj.widla@gmail.com>
Date: Wed, 17 May 2023 12:02:18 +0200
Subject: [PATCH] Improved frontend

---
 Frontend/assets/css/tools/mock/common.css     |  1 +
 Frontend/assets/css/tools/mock/r11addons.css  | 25 ++++++++++++++++++-
 Frontend/assets/css/tools/mock/r11popup.css   | 10 --------
 Frontend/assets/css/tools/mock/r11tables.css  | 13 ++++++++++
 .../assets/scripts/tools/mock/uianimation.js  |  6 +++--
 Frontend/tools/mock.html                      |  6 +++--
 6 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/Frontend/assets/css/tools/mock/common.css b/Frontend/assets/css/tools/mock/common.css
index 350f678..b7f1646 100644
--- a/Frontend/assets/css/tools/mock/common.css
+++ b/Frontend/assets/css/tools/mock/common.css
@@ -6,6 +6,7 @@
 @import url('r11tooltip.css');
 @import url('r11modal.css');
 @import url('r11flexbox.css');
+@import url('r11popup.css');
 
 @font-face {
     font-family: 'Material Icons';
diff --git a/Frontend/assets/css/tools/mock/r11addons.css b/Frontend/assets/css/tools/mock/r11addons.css
index 94db8ae..2d2e72e 100644
--- a/Frontend/assets/css/tools/mock/r11addons.css
+++ b/Frontend/assets/css/tools/mock/r11addons.css
@@ -69,4 +69,27 @@
 .content p {
     margin: 0;
     padding: 0;
-}
\ No newline at end of file
+}
+
+.refresh-button{
+    float: right; 
+    border: none; 
+    background-color: unset; 
+    font-size: xx-large; 
+}
+
+.refresh-button:hover{
+  animation-name: rotation;
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes rotation{
+    from{
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/Frontend/assets/css/tools/mock/r11popup.css b/Frontend/assets/css/tools/mock/r11popup.css
index 801d466..3b7f12f 100644
--- a/Frontend/assets/css/tools/mock/r11popup.css
+++ b/Frontend/assets/css/tools/mock/r11popup.css
@@ -47,16 +47,6 @@
     display:none;
 }
 
-
-#header-table tr td {
-    border: 1px black solid;
-    padding: 1%;
-}
-
-#header-table{
-    border-collapse: collapse;
-}
-
 @keyframes blur {
     0% {
       backdrop-filter: blur(0px);
diff --git a/Frontend/assets/css/tools/mock/r11tables.css b/Frontend/assets/css/tools/mock/r11tables.css
index 0a680ab..9762b67 100644
--- a/Frontend/assets/css/tools/mock/r11tables.css
+++ b/Frontend/assets/css/tools/mock/r11tables.css
@@ -68,4 +68,17 @@
     background-color: #3bc4f1;
     text-align: left;
     color: white;
+}
+
+#header-table tr td {
+    border: 1px black solid;
+    padding: 1%;
+}
+
+#header-table{
+    border-collapse: collapse;
+}
+
+#historyTable, td{
+    padding: 1%;
 }
\ No newline at end of file
diff --git a/Frontend/assets/scripts/tools/mock/uianimation.js b/Frontend/assets/scripts/tools/mock/uianimation.js
index 4e04f53..fd6f60e 100644
--- a/Frontend/assets/scripts/tools/mock/uianimation.js
+++ b/Frontend/assets/scripts/tools/mock/uianimation.js
@@ -90,8 +90,6 @@ function showHeadersHistory(element){
             }
         }
     );
-
-
 function focusInTip(element){
     showTip(element);
     focusedField = true;
@@ -102,6 +100,10 @@ function focusOutTip(element){
     hidTip(element);
 }
 
+function refreshHistoryRecords(){
+    getLast24hHistoryData();
+}
+
 function hidTip(element){
     if(focusedField) return;
     $('#'+element).removeClass('active');
diff --git a/Frontend/tools/mock.html b/Frontend/tools/mock.html
index 8a6de09..e426beb 100644
--- a/Frontend/tools/mock.html
+++ b/Frontend/tools/mock.html
@@ -6,7 +6,6 @@
     <link rel="stylesheet" href="../assets/css/tools/mock/fontello.css" type="text/css">
     <link rel="stylesheet" href="../assets/css/tools/mock/main.css" type="text/css">
     <link rel="stylesheet" href="../assets/css/tools/mock/common.css" type="text/css">
-    <link rel="stylesheet" href="../assets/css/tools/mock/r11popup.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
@@ -153,7 +152,10 @@
                             <!-- history -->
                             <div id="history" class="medium-vertical-margin tabcontent">
                                 <div class="block-display max-width">
-                                    <button id="btn-history-filter" class="clickable-text highlight switch"><span class="toggleIndicator"></span> filter</button>
+                                    <button id="btn-history-filter" class="clickable-text highlight switch">
+                                        <span class="toggleIndicator"></span> filter 
+                                        <button type="button" class="refresh-button" onclick="refreshHistoryRecords();" >↻</button>
+                                    </button>
                                     <div id ="history-filter" class="display-space-between max-width small-vertical-margin hiddable">
                                         <div class="three-fourth-width display-space-evenly">
                                             <div class="block-display half-width with-padding">