Browse Source

finished GUI

Simon 1 year ago
parent
commit
af2d747438
5 changed files with 256 additions and 107 deletions
  1. 78 11
      client/client.go
  2. 24 15
      comm.go
  3. 100 52
      index.html
  4. 1 1
      leader/leader.go
  5. 53 28
      main.js

+ 78 - 11
client/client.go

@@ -67,6 +67,9 @@ var guiTweet string
 var mainTweets string
 var archiveTweets string
 
+var mainInterestsString []string
+var archiveInterestsString []string
+
 //this translates to a simulated round length of ~2h
 var speedUp float64 = 7200 / ((maxTimePerRound.Seconds()) * 3)
 
@@ -187,6 +190,7 @@ func Client(clientNumber int, f *os.File) {
 			pos := receiveVirtualAddress(sharedSecret[clientNumber], leaderConn)
 
 			tweet := getGuiTweet()
+			//tweet := getRealTweet(clientNumber)
 			if clientNumber == numClients-1 {
 				log.Println("Round", round)
 				log.Println("publisherAmount", publisherAmount)
@@ -300,17 +304,23 @@ func Client(clientNumber int, f *os.File) {
 
 //creates and sends the pirQuerys for each server
 func createPIRQuery(subPhase int, clientNumber int) ([]byte, []byte) {
-	//later this will be taken from gui, this is only for testing
-	topicsOfInterest := make([]int, 1)
-	topicsOfInterest[0] = 0 //mr.Intn(10)
-	archiveInterests[0] = 0 //mr.Intn(10)
+
+	topicsOfInterest := interestsToInt(mainInterestsString, 0)
+
+	//topicsOfInterest := make([]int, neededSubscriptions)
+	if len(topicsOfInterest) == 0 {
+		topicsOfInterest = make([]int, neededSubscriptions)
+		topicsOfInterest[0] = 0
+	}
+
+	fmt.Println("tpcofinterest", topicsOfInterest)
 
 	tmpNeededSubscriptions := neededSubscriptions
 	if tmpNeededSubscriptions > len(topicList) {
 		tmpNeededSubscriptions = len(topicList)
 	}
-
 	tmptopicsOfInterest := make([]int, len(topicsOfInterest))
+
 	copy(tmptopicsOfInterest, topicsOfInterest)
 
 	tmpTopicList := make([]string, len(topicList))
@@ -320,7 +330,11 @@ func createPIRQuery(subPhase int, clientNumber int) ([]byte, []byte) {
 		if tmpNeededSubscriptions > len(archiveTopicList) {
 			tmpNeededSubscriptions = len(archiveTopicList)
 		}
-		tmptopicsOfInterest = archiveInterests //todo! take archiveInterests from gui
+		tmptopicsOfInterest = interestsToInt(archiveInterestsString, 1)
+		if len(tmptopicsOfInterest) == 0 {
+			tmptopicsOfInterest = make([]int, neededSubscriptions)
+			tmptopicsOfInterest[0] = 0
+		}
 		tmpTopicList = archiveTopicList
 	}
 
@@ -475,8 +489,6 @@ func receiveTweets(sharedSecret [2][32]byte, leaderConn net.Conn, getArchive boo
 
 		index := strings.Index(string(tweets), ";;")
 
-		fmt.Println("received", string(tweets))
-
 		if index != -1 {
 
 			textArr := strings.Split(string(tweets), ";;;")
@@ -491,6 +503,8 @@ func receiveTweets(sharedSecret [2][32]byte, leaderConn net.Conn, getArchive boo
 				goodPadding++
 			}
 
+			fmt.Println("received", text[0])
+
 			if getArchive {
 				if !strings.Contains(archiveTweets, text[0]) {
 					archiveTweets += text[0] + ";"
@@ -528,14 +542,67 @@ func GetTweets(whereFrom int) string {
 
 	for _, str := range tweetArr {
 		strArr := strings.Split(str, ";")
-		tweets += "<li>" + strArr[0] + "<br>" + strArr[1] + "</li>"
+		tweets += "<li># " + strArr[0] + "<br>" + strArr[1] + "</li>"
 	}
 
-	fmt.Println("tweetsToPost", tweets)
-
 	return tweets
 }
 
+func GetTopicList(whereFrom int) string {
+
+	var tmpTopicList []string
+	var list string
+	label1 := `<label for="`
+	label2 := `">`
+	label3 := `</label>`
+
+	var box1 string
+	box2 := `" value="`
+	box3 := `" type="checkbox"/>`
+
+	if whereFrom == 0 {
+		tmpTopicList = topicList
+		box1 = `<input name="mainTopic" id="`
+	} else {
+		tmpTopicList = archiveTopicList
+		box1 = `<input name="archiveTopic" id="`
+	}
+
+	for _, topic := range tmpTopicList {
+		list += label1 + topic + label2 + topic + label3 + box1 + topic + box2 + topic + box3 + "<br>"
+	}
+
+	return list
+}
+
+func interestsToInt(interests []string, whereFrom int) []int {
+	var interestsInt []int
+	var tmpTopicList []string
+	if whereFrom == 0 {
+		tmpTopicList = topicList
+	} else {
+		tmpTopicList = archiveTopicList
+	}
+
+	for _, topic := range interests {
+		for index, str := range tmpTopicList {
+			if topic == str {
+				interestsInt = append(interestsInt, index)
+			}
+		}
+	}
+
+	return interestsInt
+}
+
+func UpdateInterests(interests []string, whereTo int) {
+	if whereTo == 0 {
+		mainInterestsString = interests
+	} else {
+		archiveInterestsString = interests
+	}
+}
+
 //creates a shared secret for each server
 func createSharedSecret() [numClients][2][32]byte {
 	var tmpSharedSecret [numClients][2][32]byte

+ 24 - 15
comm.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"2PPS/client"
+	"encoding/json"
 	"fmt"
 	"log"
 	"net/http"
@@ -38,8 +39,6 @@ func ServeFiles(w http.ResponseWriter, r *http.Request) {
 
 		path := r.URL.Path
 
-		//fmt.Println("path before: ", path)
-
 		if path == "/" {
 
 			path = "index.html"
@@ -47,19 +46,15 @@ func ServeFiles(w http.ResponseWriter, r *http.Request) {
 			path = "/home/simon/goCode/AnonymousTopicBasedPubSubCommunicationforMicroblogging" + path
 		}
 
-		//fmt.Println("path after: ", path)
-
 		http.ServeFile(w, r, path)
 
 	case "POST":
 
 		r.ParseMultipartForm(0)
 
-		message := r.FormValue("message")
-
-		fmt.Println("----------------------------------")
-		fmt.Println("Tweet to post: ", message)
-		client.SetGuiTweet(message)
+		tweet := r.FormValue("message")
+		fmt.Println("Tweet to post: ", tweet)
+		client.SetGuiTweet(tweet)
 
 	case "getTweets":
 
@@ -77,25 +72,39 @@ func ServeFiles(w http.ResponseWriter, r *http.Request) {
 
 		r.ParseMultipartForm(0)
 
-		fmt.Println("updateMainTopicList")
+		fmt.Fprint(w, client.GetTopicList(0))
 
 	case "updateMainInterests":
 
-		r.ParseMultipartForm(0)
+		var x struct {
+			Topics []string `json:"mainTopics"`
+		}
 
-		fmt.Println("updateMainInterests")
+		if err := json.NewDecoder(r.Body).Decode(&x); err != nil {
+			panic(err)
+		}
+
+		topicsToGo := x.Topics
+		client.UpdateInterests(topicsToGo, 0)
 
 	case "updateArchiveTopicList":
 
 		r.ParseMultipartForm(0)
 
-		fmt.Println("updateArchiveTopicList")
+		fmt.Fprint(w, client.GetTopicList(1))
 
 	case "updateArchiveInterests":
 
-		r.ParseMultipartForm(0)
+		var x struct {
+			Topics []string `json:"archiveTopics"`
+		}
+
+		if err := json.NewDecoder(r.Body).Decode(&x); err != nil {
+			panic(err)
+		}
 
-		fmt.Println("updateArchiveInterests")
+		topicsToGo := x.Topics
+		client.UpdateInterests(topicsToGo, 1)
 
 	default:
 		fmt.Fprintf(w, "Request type not supported")

+ 100 - 52
index.html

@@ -5,76 +5,85 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Home</title>
 </head>
-<body style="background-color: #cccccc;">
-
-   
-
-    <div id="serverMessageBox" style="text-align: center;"></div>
-   
-    
+<body style="background-color: #ffffff;">
     <div class="container">
       <div class="toppane">
-
-      <div id="formBody">
         
         <form method="POST" id="inputTweet">
             <h1 style="font-size: large"; >Anonymous Topic Based PubSub Communication for Microblogging</h1>
             <br>
-            <label for="message">Your Tweet here</label>
-            <input id="message" name="message" value="house#tpc1#tpc2" type="text">
-            <button type="submit" style="width:100px;">Post Tweet</button>
+            <label for="tweet">Your Tweet here</label>
+            <input name="message" value="" type="text" id="tweetToPost"/>
+          <button id="inputBTN" type="submit" style="width:100px;">Post Tweet</button>
+            
           <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
-        </form>   
-
+        </form>
       </div>
 
-          
-        </div>
+      <br>
+      <br>
+      <br>
 
-        <div class="leftpane">
-          <h1 style="font-size: large;text-align: center;">Topic list</h1>
-          
-          <button id="mainUpdateTopicList" method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
-          <button id="mainUpdateInterests" method="updateMainInterests" type="submit" style="width:100px;">Update Interests</button>
 
-          <ol id="displayMainTopicList"></ol>
+      <div class="pane">
+      <div class="leftpane">
+        <h1 style="font-size: large;text-align: center;">Topic list</h1>
 
-          <div class="impressum">
-            <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
-              <br><br>
-              <a href="https://arxiv.org/pdf/2108.08624.pdf" target="_blank"> You can find the paper the thesis is based upon here</a>
-            </h1>
-          </div>
+        <form method="updateMainTopicList" id="mainUpdateTopicList">
+          <button method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
+        </form> 
+
+        <div id="mainTopicList" style="text-align: center;">
         </div>
-      
-        <div class="middlepane">
-          <h1 style="font-size: large;text-align: center;">Tweets</h1>
 
-          <form method="getTweets" id="mainTweets">
-            <button type="submit" style="width:100px;">Get Tweets</button>
-          </form>
+        <form method="updateMainInterests" id="mainInterests">
+          <button type="submit" style="width:100px;">Submit Interests</button>
 
-          <ul id="displayMainTweets"></ul>
+        </form>  
+
+        <div class="impressum">
+          <h1 style="font-size: medium;"><br>This is the gui accompanying the thesis Anonymous Topic Based PubSub Communication for Microblogging.
+          </h1>
         </div>
+      </div>
       
-        <div class="rightpane">
-          <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
-          
-          form muss drum um jedes einzeln
-          <button id="archiveUpdateTopicList" method="updateMainTopicList" type="submit" style="width:100px;">Update Main Topic List</button>
-          <button id="archiveUpdateInterests" method="updateMainInterests" type="submit" style="width:100px;">Update Interests</button>
+      <div class="middlepane">
+        <h1 style="font-size: large;text-align: center;">Tweets</h1>
+        
+        <form method="getTweets" id="mainTweets">
+          <button type="submit" style="width:100px;">Get Tweets</button>
+        </form>
+        
+        <ul id="displayMainTweets">
+        </ul>
+      </div>
+    
+      <div class="rightpane">
+        <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
+        <form method="updateArchiveTopicList" id="archiveUpdateTopicList">
+          <button method="updateArchiveTopicList" type="submit" style="width:100px;">Update Archive Topic List</button>
+        </form> 
 
-          <ol id="displayArchiveTweets"></ol>
+        
+          <div id="archiveTopicList" style="text-align: center;">
+          </div>
 
-          <br>
+          <form method="updateArchiveInterests" id="archiveInterests">
+            <button type="submit" style="width:100px;">Submit Interests</button>
+  
+        </form>  
 
-          <form method="getArchiveTweets" id="archiveTweets">
-            <button type="submit" style="width:100px;">Get Archive Tweets</button>
-          </form>
+        <br>
 
-          <ul id="displayArchiveTweets"></ul>
-        </div>
+        <form method="getArchiveTweets" id="archiveTweets">
+          <button type="submit" style="width:100px;">Get Archive Tweets</button>
+        </form>
+
+        <ul id="displayArchiveTweets">
+        </ul>
+      </div>
       </div>
+    </div>
 </body>
 <script src="main.js"> </script>
 </html>
@@ -92,13 +101,23 @@
       width: 100%;
       height: 100%;
     }
+
+    .pane {
+      border: rgb(0, 119, 255);
+      border-top-style: solid;
+      border-radius: 20px;
+    }
     
     .leftpane {
-        width: 25%;
+        width: 24%;
         height: 100%;
         float: left;
-        background-color: #0058b759;
         border-collapse: collapse;
+        border: rgb(0, 119, 255);
+        border-left-style: solid;
+        border-right-style: solid;
+        border-bottom-style: solid;
+
     }
     
     .middlepane {
@@ -109,12 +128,15 @@
     }
     
     .rightpane {
-      width: 25%;
+      width: 24%;
       height: 100%;
       position: relative;
       float: right;
-      background-color: #ffd700;
       border-collapse: collapse;
+      border: rgb(0, 119, 255);
+      border-left-style: solid;
+      border-right-style: solid;
+      border-bottom-style: solid;;
     }
     
     .toppane {
@@ -123,6 +145,32 @@
       height: 100px;
       border-collapse: collapse;
     }
+
+    button, input[type="button"], input[type="submit"] {
+      background-color: #04AA6D;
+      border: none;
+      color: white;
+      padding: 10px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin: 4px 2px;
+      border-radius: 20px;
+    }
+
+    ul li {
+      border: rgb(0, 119, 255);
+      border-top-style: solid;
+      list-style-type: none;
+      border-left-style: solid;
+      margin: 15px;
+      padding-left: 5px;
+}
+
+  .impressum {
+    padding-left: 10px;
+  }
     
     form {
       text-align: center;

+ 1 - 1
leader/leader.go

@@ -60,7 +60,7 @@ var topicAmount int
 var archiveTopicAmount int
 
 // every roundsBeforeUpdate the client updates his pirQuery
-const roundsBeforeUpdate = 2
+const roundsBeforeUpdate = 1
 const neededSubscriptions = 1
 const numThreads = 12
 const dataLength = 256

+ 53 - 28
main.js

@@ -2,28 +2,27 @@ console.log("JS Loaded")
 
 const url = "127.0.0.1:3000"
 
-var inputForm = document.getElementById("mainUpdateTopicList")
+var inputForm = document.getElementById("inputTweet")
+var data = document.getElementById("tweetToPost")
 
 inputForm.addEventListener("submit", (e)=>{
 
     //prevent auto submission
     e.preventDefault()
 
-    const formdata = new FormData(inputForm)
+    const formdata = new FormData()
+    formdata.append("message", data.value)
     fetch(url,{
-        method:"updateMainTopicList",
+        method:"POST",
         body:formdata,
-    })
-    .then(
+    }).then(
         response => response.text()
-    ).then(
-        (data) => {document.getElementById("mainTopicList").innerHTML=data}
     ).catch(
         error => console.error(error)
     )
 })
 
-var inputForm = document.getElementById("mainUpdateInterests")
+var inputForm = document.getElementById("mainUpdateTopicList")
 
 inputForm.addEventListener("submit", (e)=>{
 
@@ -32,36 +31,46 @@ inputForm.addEventListener("submit", (e)=>{
 
     const formdata = new FormData(inputForm)
     fetch(url,{
-        method:"updateMainInterests",
+        method:"updateMainTopicList",
         body:formdata,
     })
     .then(
         response => response.text()
+    ).then(
+        (data) => {document.getElementById("mainTopicList").innerHTML=data}
     ).catch(
         error => console.error(error)
     )
 })
 
-var inputForm = document.getElementById("archiveUpdateTopicList")
+var inputForm = document.getElementById("mainInterests")
 
 inputForm.addEventListener("submit", (e)=>{
 
     //prevent auto submission
     e.preventDefault()
 
-    const formdata = new FormData(inputForm)
+    arr = []
+    const mainTopics = document.getElementsByName("mainTopic")
+    for (let i = 0; i < mainTopics.length; i++) {
+        if (mainTopics[i].checked)
+        arr.push(mainTopics[i].value)
+    }
+
+    const formdata = JSON.stringify({
+        mainTopics: arr
+    })
     fetch(url,{
-        method:"updateArchiveTopicList",
+        method:"updateMainInterests",
         body:formdata,
-    })
-    .then(
-        (data) => {document.getElementById("archiveUpdateTopicList").innerHTML=data}
+    }).then(
+        response => response.text()
     ).catch(
         error => console.error(error)
     )
 })
 
-var inputForm = document.getElementById("archiveUpdateInterests")
+var inputForm = document.getElementById("archiveUpdateTopicList")
 
 inputForm.addEventListener("submit", (e)=>{
 
@@ -70,30 +79,41 @@ inputForm.addEventListener("submit", (e)=>{
 
     const formdata = new FormData(inputForm)
     fetch(url,{
-        method:"updateArchiveInterests",
+        method:"updateArchiveTopicList",
         body:formdata,
     })
     .then(
         response => response.text()
+    )
+    .then(
+        (data) => {document.getElementById("archiveTopicList").innerHTML=data}
     ).catch(
         error => console.error(error)
     )
 })
 
-var inputForm = document.getElementById("archiveUpdateTopicList")
+var inputForm = document.getElementById("archiveInterests")
 
 inputForm.addEventListener("submit", (e)=>{
 
     //prevent auto submission
     e.preventDefault()
 
-    const formdata = new FormData(inputForm)
+    arr = []
+    const archiveTopics = document.getElementsByName("archiveTopic")
+    for (let i = 0; i < archiveTopics.length; i++) {
+        if (archiveTopics[i].checked)
+        arr.push(archiveTopics[i].value)
+    }
+
+    const formdata = JSON.stringify({
+        archiveTopics: arr
+    })
     fetch(url,{
-        method:"updateArchiveTopicList",
+        method:"updateArchiveInterests",
         body:formdata,
-    })
-    .then(
-        (data) => {document.getElementById("displayArchiveTweets").innerHTML=data}
+    }).then(
+        response => response.text()
     ).catch(
         error => console.error(error)
     )
@@ -110,14 +130,17 @@ inputForm.addEventListener("submit", (e)=>{
     fetch(url,{
         method:"getTweets",
         body:formdata,
-    }).then(
+    })
+    .then(
+        response => response.text()
+    ).then(
         (data) => {document.getElementById("displayMainTweets").innerHTML=data}
     ).catch(
         error => console.error(error)
     )
 })
 
-var inputForm = document.getElementById("inputTweet")
+var inputForm = document.getElementById("archiveTweets")
 
 inputForm.addEventListener("submit", (e)=>{
 
@@ -126,11 +149,13 @@ inputForm.addEventListener("submit", (e)=>{
 
     const formdata = new FormData(inputForm)
     fetch(url,{
-
-        method:"POST",
+        method:"getArchiveTweets",
         body:formdata,
-    }).then(
+    })
+    .then(
         response => response.text()
+    ).then(
+        (data) => {document.getElementById("displayArchiveTweets").innerHTML=data}
     ).catch(
         error => console.error(error)
     )