Merge pull request #4 from rahulv07/frontend

Websocket URL change from local to live server in Glitch

Author: rahulv07

app.js

@@ -5,6 +5,37 @@ chrome.identity.getProfileUserInfo(function(browserUser){
   document.getElementsByClassName("browserID")[0].textContent = "ID: " + sourceID;
 });
 
+document.getElementsByTagName("i")[0].addEventListener("click",(event)=>{
+  const sinkBrowserID = prompt("Enter the browser ID");
+  if(sinkBrowserID != null){
+    const nickName = prompt("Enter nickname for browser " + sinkBrowserID);
+    if(nickName != null){
+      chrome.storage.local.get({lyncSavedSources:[]},(result) => {
+        var lyncSavedSources = result.lyncSavedSources;
+        lyncSavedSources.push({sourceID:sinkBrowserID,nickName:nickName});
+        chrome.storage.local.set({lyncSavedSources:lyncSavedSources},()=>{
+          window.close();
+        });
+      });
+    }
+  }
+});
+
+function removeBrowser(browserID){
+  chrome.storage.local.get({lyncSavedSources:[]},(result) => {
+    var lyncSavedSources = result.lyncSavedSources;
+    for(var b in lyncSavedSources){
+      if(lyncSavedSources[b].sourceID == browserID){
+        lyncSavedSources.splice(b,1);
+        break;
+      }
+    }
+    chrome.storage.local.set({lyncSavedSources:lyncSavedSources},()=>{
+      window.close();
+    })
+  });
+}
+
 function loadSinkNames(){
   var currentDiv = document.getElementsByClassName("paired")[0];
 
@@ -15,13 +46,25 @@ function loadSinkNames(){
       const sinkDiv = document.createElement("div");
       sinkDiv.setAttribute("class","sinks");
 
-      const sinkName = document.createElement("p").appendChild(document.createTextNode(lyncSavedSources[i].nickName));
-      sinkDiv.appendChild(sinkName);
+      const sinkNameSpan = document.createElement("span");
+      sinkNameSpan.setAttribute("class","sinkName");      
+      sinkNameSpan.appendChild(document.createElement("p").appendChild(document.createTextNode(lyncSavedSources[i].nickName)));
+      sinkDiv.appendChild(sinkNameSpan);
+
+      const trashIconSpan = document.createElement("span");
+      const trashIcon = document.createElement("i");
+      trashIcon.setAttribute("class","trashIcon fa-solid fa-trash");
+      trashIconSpan.appendChild(trashIcon);
+      sinkDiv.appendChild(trashIconSpan);
 
-      sinkDiv.addEventListener("click",(event) => {
+      sinkNameSpan.addEventListener("click",(event) => {
         sendLink(sourceID,lyncSavedSources[i].sourceID);
       });
 
+      trashIcon.addEventListener("click",(event) => {
+        removeBrowser(lyncSavedSources[i].sourceID);
+      });
+
       currentDiv.after(sinkDiv);
       currentDiv = sinkDiv; 
     }  
@@ -42,7 +85,7 @@ function sendLink(sourceID,sinkID) {
 
     chrome.runtime.sendMessage(data,(res)=>{
       if(res.status == "SUCCESS"){
-        alert("Link Sent!");
+        window.close();
       }
       else{
         alert("Error sending the link!");

background.js

@@ -5,7 +5,7 @@ chrome.identity.getProfileUserInfo(function(browserUser){
     sourceID = browserUser.id;
 });
 
-connection = new WebSocket("ws://localhost:8080");
+connection = new WebSocket("wss://lync-api.glitch.me");
 
 connection.onopen = (event) => {
     console.log("Connected to server.");

index.html

@@ -13,8 +13,9 @@
     <h3 class="title">Lync</h3>
     <p class="browserID">ID: </p>
     <div class="paired">
-        <p>Paired <i class="fa-regular fa-square-plus"></i></p>
+        Paired <i class="plusIcon fa-regular fa-square-plus"></i>
     </div>
+    <div class="bottomSpace"></div>
 
     <script src="app.js"></script>
 </body>

styles.css

@@ -17,16 +17,19 @@ p.browserID{
     margin-bottom: 4%;
 }
 
-div.paired > p{
+div.paired{
     padding-left: 8%;
     padding-right: 8%;
-    margin: 0%;
+    margin-bottom: 3%;
     color: grey;
     font-size: 17px;
 }
 
 div.sinks{
-    padding: 8%;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 8%;
+    padding-right: 8%;
     font-size: 13px;
 }
 
@@ -36,4 +39,12 @@ div.sinks:hover{
 
 i{
     color: black;
+}
+
+span.sinkName{
+    width: 90%;
+}
+
+div.bottomSpace{
+    padding: 3%;
 }