From 92ee2928ebf8954be324d74d9a19dd7e21e0b04e Mon Sep 17 00:00:00 2001
From: Ian <ian.dunkelberg@outlook.com>
Date: Mon, 2 Oct 2023 17:47:49 -0700
Subject: [PATCH] style changes and preparing for re-implementing conversation
 component

---
 frontend/components/ThreadList/ThreadList.vue | 59 +++++++++++--------
 .../WebTextingContainer.vue                   |  8 ++-
 .../components/conversation/Conversation.vue  |  6 ++
 frontend/main.ts                              | 17 ++++++
 frontend/routes/index.js                      | 17 ------
 threadlist.php                                |  7 ++-
 6 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/frontend/components/ThreadList/ThreadList.vue b/frontend/components/ThreadList/ThreadList.vue
index ab9b998..11c4c84 100644
--- a/frontend/components/ThreadList/ThreadList.vue
+++ b/frontend/components/ThreadList/ThreadList.vue
@@ -1,15 +1,21 @@
-<script lang="ts">
+<script lang="ts" >
 import { MessageData, emitter, state, } from '../../lib/global';
 import ThreadPreview from '../ThreadPreview/ThreadPreview.vue';
+import { RouterLink } from 'vue-router';
 
 // type ThreadListInterface = {
     
 //     username: String,
 // }
-export default {
-    props: {
+
+
+export default{
+    props:{
         username: String,
     },
+    components:{ThreadPreview}
+}
+
 
     /*
         get the user extension this is handled in threadlist.php
@@ -32,7 +38,7 @@ export default {
     <input type='hidden' name='key_uuid' id='key_uuid'/>
     </form>
     */
-}
+
 </script>
 
 <style>
@@ -77,8 +83,16 @@ export default {
     table-layout: fixed;
 }
 
+@media screen  and (width <=700) {
+    div.action_bar{
+        top: 0px;
+    }
+}
+
 </style>
 
+
+
 <template>
     
     <div class="threadlist_container">
@@ -89,7 +103,7 @@ export default {
 
 
         <div class='action_bar' id='action_bar'>
-            <div class='heading'><b>WebTexting</b> this.props.username  </div>
+            <div class='heading'><b>WebTexting</b> {{username}}  </div>
             <div class='actions'>
             </div>
             <div style='clear: both;'></div>
@@ -97,24 +111,23 @@ export default {
         <div class='table'>
             <!-- <ThreadPreview  v-for="preview in this.threads" /> -->
             <div class="preview_list_container">
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161"><span class="thread-name">12063801161</span><br><span class="thread-last-message">Test </span><span class="timestamp" data-timestamp="2023-09-13 21:39:05.45867">9 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">dan ryan</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Franklin</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Oogway</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Pope</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Poe</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Tai Lung</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Roshi</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Goku</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161"><span class="thread-name">12063801161</span><br><span class="thread-last-message">Test </span><span class="timestamp" data-timestamp="2023-09-13 21:39:05.45867">9 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">dan ryan</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Franklin</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Oogway</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Pope</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Poe</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Tai Lung</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Roshi</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
-                <div class='tr_replace'><div  class=td_preview><a href="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"><span class="thread-name">Goku</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></a></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">dan ryan</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Franklin</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Oogway</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Pope</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Poe</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Tai Lung</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Roshi</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Goku</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161"> <span class="thread-name">12063801161</span><br><span class="thread-last-message">Test </span><span class="timestamp" data-timestamp="2023-09-13 21:39:05.45867">9 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">dan ryan</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Franklin</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Oogway</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Pope</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Poe</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Tai Lung</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Roshi</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
+                <div class='tr_replace'><div  class=td_preview><router-link to="thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12068589310"> <span class="thread-name">Goku</span><br><span class="thread-last-message">Hmm</span><span class="timestamp" data-timestamp="2023-09-06 21:57:12.733721">16 days ago</span></router-link></div ></div >
                 </div>
             </div>
     </div>
diff --git a/frontend/components/WebTextingContainer/WebTextingContainer.vue b/frontend/components/WebTextingContainer/WebTextingContainer.vue
index 816b97d..e63f2a9 100644
--- a/frontend/components/WebTextingContainer/WebTextingContainer.vue
+++ b/frontend/components/WebTextingContainer/WebTextingContainer.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import Conversation from '../conversation/Conversation.vue';
 import ThreadList from '../ThreadList/ThreadList.vue'
+import { useRoute } from 'vue-router';
 import { MessageData } from '../../lib/global';
 
 export default {
@@ -36,9 +37,11 @@ export default {
 <!-- This container should default to threadlist on the left and blank space on the right.
 The blank space should notify the user that they can select a thread to display that thread in the threadContainer -->
 <template>
+    <Router-View>
+
     <div id="WEB_TEXT_ROOT">
         <link type="text/css" href="../../../js/style.css">
-        <ThreadList />
+        <ThreadList username='Steve'/>
         <!-- <div class="threadlist_container"> 
                     <div class='action_bar' id='action_bar'>
                         <div class='heading'><b>WebTexting</b>  this.props.username  </div>
@@ -54,7 +57,7 @@ The blank space should notify the user that they can select a thread to display
                     </table> -->
         <!-- </div> -->
         <div id="conversation" data-v-app="">
-            <div class="thread-header">12063801161 <!----><!----></div>
+            <div class="thread-header">12063801161 <!----> as {{this.$route.query.number ? this.$route.query.number : this.$route.query.extension_uuid}}<!----></div>
             <div class="thread">
                 <div class="message-container">
                     <backfill backfillavailable="false"></backfill>
@@ -170,6 +173,7 @@ The blank space should notify the user that they can select a thread to display
             </div>
         </div>
     </div>
+    </Router-View>
 </template>
 
 <style scoped>
diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue
index 6410df5..5e630e9 100644
--- a/frontend/components/conversation/Conversation.vue
+++ b/frontend/components/conversation/Conversation.vue
@@ -260,4 +260,10 @@ table {
     width: 100%;
     table-layout: fixed;
 }
+@media screen and (width <=700px){
+    #conversation{ 
+        display: none;
+    }
+
+}
 </style>
diff --git a/frontend/main.ts b/frontend/main.ts
index bec25db..de018b7 100644
--- a/frontend/main.ts
+++ b/frontend/main.ts
@@ -1,4 +1,5 @@
 import {  createApp } from 'vue';
+import {createWebHistory, createRouter} from 'vue-router';
 import router from './routes';
 import { RunSIPConnection } from './lib/SIP';
 import Conversation from './components/conversation/Conversation.vue'; //remove once initializeThreadListJS works
@@ -82,6 +83,22 @@ export const initializeWebTextingContainer = function initializeWebTextingContai
         console.log("error from within vue:", info, err, instance);
         console.error(err);
     }
+
+    const router = createRouter({
+        history: createWebHistory("/app/webtexting/"),
+        routes:[
+            {
+                path:"/threadlist.php",
+                name:"Home",
+                component:WebTextingContainer
+            },
+            {
+                path:"/thread.php",
+                name:"ThreadView",
+                component: WebTextingContainer
+            }
+        ]
+    })
     app.use(router);
     app.mount("#TEST_DIV_FOR_TESTING_WEBTEXTING");
 
diff --git a/frontend/routes/index.js b/frontend/routes/index.js
index e314e0e..e69de29 100644
--- a/frontend/routes/index.js
+++ b/frontend/routes/index.js
@@ -1,17 +0,0 @@
-
-import {createWebHistory, createRouter} from 'vue-router';
-
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes:[
-        {
-            path:'/',
-            name:'Home',
-            component: Vue.component('Home', require('../components/WebTextingContainer/WebTextingContainer.vue'))
-
-        }
-    ]
-})
-
-export default router;
\ No newline at end of file
diff --git a/threadlist.php b/threadlist.php
index e4dc2bd..8305e3f 100644
--- a/threadlist.php
+++ b/threadlist.php
@@ -199,7 +199,6 @@
 
 <script src="js/webtexting.umd.js"></script>
 <script type="text/javascript">
-      //window.notification_data = <?php echo json_encode($threads); ?>;
     window.notification_data = <?php echo json_encode(array("extension_uuid" => $extension['extension_uuid'])); ?>;
     function clean_number() { // clean any non-digits out of the phone number box
         document.querySelector("#new-thread-number").value = document.querySelector("#new-thread-number").value.replace(/[^\d+]/g, "");
@@ -221,7 +220,13 @@ function clean_number() { // clean any non-digits out of the phone number box
     grid-template-columns: 30% 1fr;
     grid-template-rows: auto;
 }
+@media screen and (width <= 700px) {
+    #WEB_TEXT_ROOT{
+    grid-template-columns:100%;
+    grid-template-rows:80vh;
+    }
 
+}