Skip to content

Commit

Permalink
final changes before depoloy to test
Browse files Browse the repository at this point in the history
  • Loading branch information
Ian committed Dec 7, 2023
1 parent f81c846 commit abab6a6
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 132 deletions.
4 changes: 4 additions & 0 deletions createthread.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<?php
$url = $_SERVER["HTTP_ORIGIN"]."/app/webtexting/";
header("Location: ".$url);
?>
43 changes: 0 additions & 43 deletions frontend/components/ConvoPlaceholder.vue

This file was deleted.

47 changes: 47 additions & 0 deletions frontend/components/NewMessage.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="js">
import SendBox from './SendBox/SendBox.vue';
export default {
name: 'NewMessage',
components: { SendBox },
props:{
ownNumber: String
},
data() {
return {
number: '',
}
}
}
</script>
<template>
<div id="NEW_MESSAGE">
<div class="thread-header">
<a class="back-link" href="/app/webtexting" aria="Go Back to threadlist!">←</a>
<p>New Conversation</p>
</div>
<span class='new-thread-message'>Enter Number:
<input type="text" v-model="number" id="new-thread-number" placeholder="(206) 555-1212" />
</span>
<SendBox :remoteNumber="number" :ownNumber="ownNumber" />
</div>
</template>

<style>
#NEW_MESSAGE {
grid-column-start: 2;
grid-column-end: 2;
height: 83vh;
}
@media screen and (width <=700px) {
#NEW_MESSAGE {
z-index: 5;
grid-column-start: 1;
grid-column-end: 1;
height:94vh;
}
}
</style>
2 changes: 1 addition & 1 deletion frontend/components/SendBox/SendBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default {
ownNumber: {
type: String,
required: true,
}
},
},
methods: {
keypress(e: KeyboardEvent) {
Expand Down
76 changes: 41 additions & 35 deletions frontend/components/ThreadList/ThreadList.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts" >
import ThreadPreview, { ThreadPreviewInterface } from '../ThreadPreview/ThreadPreview.vue';
import {emitter} from '../../lib/global'
import {emitter, ThreadChangePayload} from '../../lib/global'
// type ThreadListInterface = {
Expand All @@ -17,22 +17,23 @@ export default {
threads: Array<Object>,
threadPreviews: Array<ThreadPreviewInterface>,
selectedConvo: Boolean,
newThreadView: Boolean
},
components: { ThreadPreview },
data() {
return { activeThread: '' }
},
computed: {
recieveEmit(activeConversation) {
recieveEmit(threadChangeObject:ThreadChangePayload) {
//console.log(`active conversation: ${activeConversation}`);
this.activeThread = activeConversation;
this.activeThread = threadChangeObject.key;
return this.activeThread;
}
},
mounted(){
emitter.on('thread-change', (activeConversation: String) => {
emitter.on('thread-change', (threadChangeObject:ThreadChangePayload) => {
//console.log("TL event get", activeConversation);
this.activeThread = activeConversation;
this.activeThread = threadChangeObject.key;
return this.activeThread;
})
},
Expand All @@ -48,42 +49,27 @@ export default {
</script>
<template>

<div class="threadlist_container active" id="THREADLIST" v-bind:class="selectedConvo ? 'hide-if-small': 'no-convo-selected'">

<div class="threadlist-header">Conversations
<router-link :to="'/createthread.php'" class="thread-link" >New contact</router-link>
</div>

<div class="threadlist_container active" id="THREADLIST" v-bind:class="(selectedConvo || newThreadView) ? 'hide-if-small': 'no-convo-selected'">
<div class="threadlist-header">Conversations
<a id="notification-btn" role="button" class="fas fa-bell-slash fa-fw f" onclick="toggleNotifications()" aria-label="toggle notifications"></a>
</div>
<div class='threadlist-table'>

<div class="preview_list_container">
<ThreadPreview v-for="preview in threadPreviews" :key="preview.toString()"
v-bind="preview" :activeThread="this.activeThread" />
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
<div class="tr_replace inactiveThread" last_message="[object Object]"><div class="td_preview inactiveThread"><a href="/app/webtexting/thread.php?extension_uuid=fe91be7c-ecb2-4661-9d3a-bcf27099221b&amp;number=12063801161" class="thread-link"><div class="thread-preview-container inactiveThread"><span class="thread-name inactiveThread">12063801161</span><span class="timestamp inactiveThread" data-timestamp="2023-11-29 22:45:09.679273">5 days ago</span><span class="thread-last-message inactiveThread">MMS message</span></div></a></div></div>
</div>
<div class="link-container">
<router-link :to="'/createthread.php'" class="thread-link dot" aria-label="new contact">+</router-link>
</div>
</div>
</div>
</template>
<style>
.float-right{
position:absolute;
top: 50%;
float:right;
}
.active{
grid-column-start: 1;
Expand All @@ -92,9 +78,6 @@ export default {
direction: ltr;
padding-left: 0.25rem;
}
.threadlist_container {
height: 100%;
grid-column-start: 1;
Expand Down Expand Up @@ -126,6 +109,29 @@ export default {
width: 100%;
table-layout: fixed;
}
.link-container{
font-size: 2rem;
line-height: 2rem;
height: 3rem;
width: 3rem;
background-color: #5f9fd3;
border-radius: 50%;
position:relative;
float: right;
}
.dot {
color: white;
text-align:center;
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
left: 50%;
transform: translate(-50%, -50%) ;
}
.dot:hover{
color:#BB6025;
}
Expand Down
47 changes: 22 additions & 25 deletions frontend/components/ThreadPreview/ThreadPreview.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import Conversation from '../conversation/Conversation.vue';
import { MessageData, emitter } from '../../lib/global'
import { MessageData, emitter, ThreadChangePayload } from '../../lib/global'
export type ThreadPreviewInterface = {
displayName: {
Expand Down Expand Up @@ -73,13 +73,13 @@ export default {
components: { Conversation },
computed: {
currentThread() {
if (this.remoteNumber == this.activeThread) {
if (this.remoteNumber && this.remoteNumber == this.activeThread) {
return this.remoteNumber;
}
else if (this.groupUUID == this.activeThread) {
else if (this.groupUUID && this.groupUUID == this.activeThread) {
return this.groupUUID;
}
else if(this.displayName == this.activeThread){
else if(this.displayName && this.displayName == this.activeThread){
return this.displayName;
}
return false;
Expand All @@ -91,21 +91,29 @@ export default {
},
methods: {
routerLinkClickHandler(event) {
let payload:ThreadChangePayload= {key:' ',};
if(this.displayName){
emitter.emit("thread-change", this.displayName);
//emitter.emit("thread-change", this.displayName);
payload.key=this.displayName;
//console.log(`Hey! you clicked me! I have displayName: ${this.displayName}`)
}
else if (this.remoteNumber) {
emitter.emit("thread-change", this.remoteNumber)
//emitter.emit("thread-change", this.remoteNumber)
payload.key=this.remoteNumber;
//console.log(`Hey! you clicked me! I have remoteNumber: ${this.remoteNumber}`)
}
else if (this.groupUUID) {
emitter.emit("thread-change", this.groupUUID)
else{
//emitter.emit("thread-change", this.groupUUID)
//console.log(`Hey! you clicked me! I have groupUUID: ${this.groupUUID}`)
payload.key=this.groupUUID;
}
console.log(`here's the link to edit a contact ${this.contactEditLink}`)
payload.editLink = this.contactEditLink;
console.log(payload);
emitter.emit("thread-change",payload)
},
},
}
Expand Down Expand Up @@ -196,21 +204,7 @@ export default {
transform: translateY(-50%);
}
.dot {
grid-column: 1;
grid-row-start: 1;
grid-row-end: 3;
height: 50px;
width: 50px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
margin: 0;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.activeThread {
color: white;
Expand All @@ -228,7 +222,10 @@ export default {
background-color: #aaaaaa;
}
.tr_replace:first-child {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.tr_replace:last-child {
border-bottom-left-radius: 0.5rem;
Expand Down
Loading

0 comments on commit abab6a6

Please sign in to comment.