bug fixes

index.html

@@ -45,10 +45,23 @@
         </div>
 
           <div v-else>
+            <form class="draft" @submit="sendSMS" @submit.prevent="onSubmit">
+              <label>
+                Phone Number:
+                <input type="tel" v-model="sendToNumber" placeholder="Phone Number" maxlength="10" minlength="10" size="10" pattern="^\d{10}$" required>
+              </label>
+              <label>
+                Message:
+                <textarea v-model="messageToSend" placeholder="Message" required></textarea>
+              </label>
+              <input type="submit" :disabled="disableSMSSend" value="Send">
+              <div v-if="sendMsgErr">Error sending message: {{ sendMsgErr }}</div>
+            </form>
             <div v-if="threads.length">
               <br>
               <span v-for="person in threads">
                 <button @click="openThread(person)">{{ formatPhone(person) }} - Open Thread</button>
+                <button @click="deleteThread(person)">Delete Thread</button>
                 <br><br>
               </span>
               <div v-if="showingThreadNum">
@@ -60,17 +73,7 @@
             <div v-else>
               No threads
             </div>
-            <form class="draft" @submit="sendSMS">
-              <label>
-                Phone Number:
-                <input type="tel" v-model="sendToNumber" placeholder="Phone Number" maxlength="10" minlength="10" size="10" pattern="^\d{10}$" required>
-              </label>
-              <label>
-                Message:
-                <textarea v-model="messageToSend" placeholder="Message" required></textarea>
-              </label>
-              <input @submit.prevent="onSubmit" type="submit" :disabled="disableSMSSend" value="Send">
-            </form>
+
           </div>
 </div>
 <div v-else>

main.css

@@ -12,13 +12,30 @@ body{
 
 
   .from-us{
-    margin-left: 2em;
-    margin-right: 75%;
-    background-color: #e36414;
+    margin-left: 25%;
+    background-color: #0F4C5C;
     padding: 10px;
   }
 
+  .from-them{
+    background-color: #e36414;
+    margin-right: 75%;
+  }
+
+  .from-us, .from-them{
+    padding: 10px;
+    width: 25%;
+    font-size: 1.5em;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    word-break: break-all;
+  }
+
+  .sendMsgErr{
+    color: yellow;
+  }
+
   .msgBreak{
+    font-size: 1.0em;
     margin-top: 1em;
   }
 

main.js

@@ -20,6 +20,7 @@ let app = createApp({
       darkMode: true,
       disableSMSSend: false,
       messageToSend: "",
+      sendMsgErr: "",
       sendToNumber: "",
       showingThreadNum: "",
       threadOffset: 0,
@@ -53,29 +54,32 @@ let app = createApp({
         this.lastThreadLineHeader = this.threadLineHeader
 
         let fromUs = "from-us"
-        let applyBreak = true
+        let applyBreak = false
 
         messages = messages.split('\n')
         if (messages.length > 0){
           for (let i = 0; i < messages.length; i++){
-            applyBreak = true
+            applyBreak = false
+            fromUs = fromUs.replaceAll(" msgBreak", "")
             if (messages[i] !== ''){
 
+
               if (messages[i].startsWith(this.ownedNumber)){
                 fromUs = "from-us"
                 messages[i] = messages[i].replace(this.ownedNumber, this.formatPhone(this.ownedNumber))
+                applyBreak = true
               }
               else if(messages[i].startsWith(this.showingThreadNum)){
                 fromUs = "from-them"
                 messages[i] = messages[i].replace(this.showingThreadNum, this.formatPhone(this.showingThreadNum))
+                applyBreak = true
               }
-              else{
-                applyBreak = false
-              }
+
               if (applyBreak){
                 fromUs += " msgBreak"
               }
 
+              console.debug(messages[i] + " " + fromUs)
               this.threadMessages.push([messages[i], fromUs])
 
             }
@@ -85,6 +89,7 @@ let app = createApp({
       })
     },
     sendSMS(){
+      this.sendMsgErr = ""
       this.disableSMSSend = true
       fetch(this.backend + this.userID + '/send/' + this.sendToNumber, {
         method: 'POST',
@@ -95,10 +100,14 @@ let app = createApp({
           this.messageToSend = ""
         }
         else{
-          console.debug(resp)
+          resp.text().then(text => {
+            this.sendMsgErr = text
+            console.debug(text)
+        })
         }
       }).catch(err => {
         this.disableSMSSend = false
+        this.sendMsgErr = err.toString()
         console.log(err)
       })
       return false
@@ -140,6 +149,17 @@ let app = createApp({
     updateThreads()
     if (doInterval){setInterval(updateThreads, 10000)}
     },
+    deleteThread(num){
+      fetch(this.backend + this.userID + '/delete/' + num, {'method': 'POST'}).catch((err) => {
+        alert("Failed to delete thread. Please report if this keeps occurring.")
+      }).then((res) =>{
+        if (! res.ok){
+          alert("Failed to delete thread. Please report if this keeps occurring.")
+          return
+        }
+        this.getThreads(false)
+      })
+    },
     async buyNum(e){
       let numToBuy = e.target.dataset.number
       console.log("Buying number " + numToBuy)