From f1db3b3a3f64a90ae037bcd7302d9429df103c47 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 11 Mar 2022 20:17:12 +0100
Subject: [PATCH] feat(ui) - assist wip

---
 tracker/tracker-assist/layout/index.html | 260 ++++++++++++++++++++---
 1 file changed, 236 insertions(+), 24 deletions(-)

diff --git a/tracker/tracker-assist/layout/index.html b/tracker/tracker-assist/layout/index.html
index bc323b16c..90ab1542c 100644
--- a/tracker/tracker-assist/layout/index.html
+++ b/tracker/tracker-assist/layout/index.html
@@ -10,7 +10,7 @@
     <!-- <link href="css/styles.css" rel="stylesheet"> -->
     <style>
 .connecting-message {
-  margin-top: 50%;
+  /* margin-top: 50%; */
   font-size: 20px;
   color: #aaa;
   text-align: center;
@@ -22,28 +22,77 @@
   display: block;
 }
 .status-connecting .card {
-  display: none;
+  /* display: none; */
 }
 
 .card{
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   min-width: 324px;
   width: 350px;
   max-width: 800px;
-  /*min-height: 220px;*/
-  max-height: 450px;
-  /*resize: both;
-  overflow: auto;*/
+  /* border: solid thin #ccc; */
+  /* box-shadow: 0 0 10px #aaa; */
+  border: solid 4px rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+}
+
+.card-footers {
+  display: flex;
+  border-bottom: solid thin #CCC;
+  padding: 5px 5px;
+  justify-content: space-between;
+}
+
+.card-footers .assist-controls {
+  display: flex;
+  align-items: center;
+}
+
+.btn-danger {
+  background-color: #CC0000 !important;
+  color: white;
+}
+
+.btn-danger:hover {
+  background-color: #FF0000 !important;
+  color: white;
+}
+
+.btn {
+  padding: 5px 8px;
+  font-size: 14px;
+  border-radius: 3px;
+  /* height: 30px; */
+  text-transform: uppercase;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.btn:hover {
+  background-color: #ddd;
+  border-color: #ddd;
 }
 
 .card .card-header{
   cursor: move;
+  padding: 14px 18px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: solid thin #ccc;
 }
+
 #agent-name, #duration{
   cursor:default;
 }
 
+#video-container {
+  background-color: #CCC;
+}
 #local-stream, #remote-stream {
-  display:none;
+  /* display:none;  */ /* TODO uncomment this line  */
 }
 #video-container.remote #remote-stream {
   display: block;
@@ -69,8 +118,9 @@
   display:none;
 }
 #audio-btn:after {
-  text-transform: capitalize;
-  content: 'Mute'
+  /* text-transform: capitalize; */
+  content: 'Mute';
+  padding-left: 5px;
 }
 #audio-btn.muted .bi-mic-mute {
   display: inline-block;
@@ -79,7 +129,8 @@
   display:none;
 }
 #audio-btn.muted:after {
-  content: 'Unmute'
+  content: 'Unmute';
+  padding-left: 5px;
 }
 
 
@@ -87,11 +138,13 @@
   display:none;
 }
 #video-btn:after {
-  text-transform: capitalize;
-  content: 'Stop Video'
+  /* text-transform: capitalize; */
+  content: 'Stop Video';
+  padding-left: 5px;
 }
 #video-btn.off:after {
-  content: 'Start Video'
+  content: 'Start Video';
+  padding-left: 5px;
 }
 #video-btn.off .bi-camera-video-off {
   display: inline-block;
@@ -100,16 +153,129 @@
   display:none;
 }
 
+/* CHART */
+#chat-card {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+}
+
+#chat-card .chat-header {
+  border-bottom: solid thin #ccc;
+  padding: 8px 16px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+#chat-card .chat-header .chat-title {
+  display: flex;
+  align-items: center;
+}
+
+#chat-card .chat-header .chat-title span {
+  margin-left: 6px;
+}
+
+#chat-card .messages {
+  padding: 8px 16px;
+  overflow-y: auto;
+  /* height: calc(100vh - 120px); */
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+#chat-card .message-text {
+  padding: 8px 16px;
+  border-radius: 20px;
+  color: #666666;
+  margin-bottom: 2px;
+}
+
+#chat-card .message {
+  margin-bottom: 15px;
+}
+
+#chat-card .messages .message.left .message-text {
+  text-align: left;
+  background: #D7E2E2;
+  border-radius: 0px 30px 30px 30px;
+}
+
+#chat-card .message .message-user {
+  font-size: 12px;
+  font-weight: bold;
+  color: #999999;
+}
+#chat-card .message .message-time {
+  font-size: 12px;
+  color: #999999;
+  margin-left: 4px;
+}
+
+#chat-card .messages .message.right {
+  margin-left: 20%;
+  text-align: right;
+}
+
+#chat-card .messages .message.right .message-text {
+  background: #E4E4E4;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 30px 30px 0px 30px;
+}
+
+#chat-card .input-container {
+  display: flex;
+  margin: 10px;
+  border-radius: 3px;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  background-color: #DDDDDD;
+  position: relative;
+}
+
+#chat-card .input-container .input {
+  width: 100%;
+  border: none;
+  border-radius: 0px;
+  padding: 8px 16px;
+  font-size: 16px;
+  color: #333;
+  background-color: transparent;
+}
+
+.send-btn {
+  width: 26px;
+  height: 26px;
+  background-color: #AAA;
+  position: absolute;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  cursor: pointer;
+}
+.send-btn:hover {
+  background-color: #999;
+}
+.send-btn svg {
+  fill: #DDDDDD;
+}
     </style>
 
-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    
   </head>
   
   
   <body>
     <section id="or-assist" class="status-connecting">
         <div class="connecting-message"> Connecting... </div>
-        <div class="card border-dark shadow">
+        <div class="card shadow">
             <div class="drag-area card-header d-flex justify-content-between">
                 <div class="user-info">
                     <span>Call with</span> 
@@ -123,19 +289,23 @@
             </div>
             <div id="video-container" class="card-body bg-dark p-0 d-flex align-items-center position-relative">
                 <div id="local-stream" class="ratio ratio-4x3 rounded m-0 p-0 shadow">
-                    <p class="text-white m-auto text-center">Starting video...</p>
+                    <!-- <p class="text-white m-auto text-center">Starting video...</p> -->
                     <video id="video-local" autoplay muted></video>
                 </div>
                 
                 <div id="remote-stream" class="ratio ratio-4x3 m-0 p-0">
-                    <p id="remote-stream-placeholder" class="text-white m-auto text-center">Starting video...</p>
+                    <!-- <p id="remote-stream-placeholder" class="text-white m-auto text-center">Starting video...</p> -->
                     <video id="video-remote" autoplay></video>
                 </div>
             </div>
 
-            <div class="card-footer bg-transparent d-flex justify-content-between">
+            <div class="card-footers">
                 <div class="assist-controls">
-                    <a href="#"  id="audio-btn" class="btn btn-light btn-sm text-uppercase me-2"><i>
+                    <button
+                      href="#"
+                      id="audio-btn"
+                      class="btn btn-light btn-sm text-uppercase me-2"
+                    ><i>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
                           <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
                           <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
@@ -144,10 +314,9 @@
                           <path d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879l-1-1V3a2 2 0 0 0-3.997-.118l-.845-.845A3.001 3.001 0 0 1 11 3z"/>
                           <path d="m9.486 10.607-.748-.748A2 2 0 0 1 6 8v-.878l-1-1V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z"/>
                         </svg>
-
-                    </i></a>
+                    </i></button>
                     <!-- Add class .mute to #audio-btn when user  mutes audio -->
-                    <a href="#" id="video-btn" class="off btn btn-light btn-sm text-uppercase ms-2"><i >
+                    <button href="#" id="video-btn" class="off btn btn-light btn-sm text-uppercase ms-2"><i >
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"/>
                         </svg>
@@ -155,13 +324,56 @@
                           <path fill-rule="evenodd" d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z"/>
                         </svg>
 
-                    </i></a>
+                    </i></button>
                     <!--Add class .off to #video-btn when user stops video -->
                 </div>
                 <div class="assist-end">
-                    <a id="end-call-btn" href="#" class="btn btn-danger btn-sm  text-uppercase">End</a>
+                    <button id="end-call-btn" href="#" class="btn btn-danger btn-sm  text-uppercase" style="margin-right: 8px;">End</button>
                 </div>
             </div>
+
+            <!-- CHAT -->
+            <div id="chat-card">
+              <div class="chat-header">
+                <div class="chat-title">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-chat" viewBox="0 0 16 16">
+                    <path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
+                  </svg>
+                  <span>Chat</span>
+                </div>
+                <div>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+                  </svg>
+                </div>
+              </div>
+              <div class="messages">
+                <div class="message left">
+                  <div class="message-text"> Hey, did you get the key? </div>
+                  <div>
+                    <span class="message-user">Username</span>
+                    <span class="message-time"> 00:00 </span>
+                  </div>
+                </div>
+                <div class="message right">
+                  <div class="message-text">
+                    Oui, merci!
+                  </div>
+                  <div>
+                    <span class="message-user">Username</span>
+                    <span class="message-time">00:00</span>
+                  </div>
+                </div>
+              </div>
+              <div class="input-container">
+                <input type="text" class="input" placeholder="Type a message...">
+                <div class="send-btn">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
         </div>    
     </section>
   </body>