|
|
@@ -0,0 +1,138 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Home</title>
|
|
|
+</head>
|
|
|
+<body style="background-color: #cccccc;">
|
|
|
+
|
|
|
+ <div id="formBody" style="display: flex;justify-content: center;align-items: center;height: 90vh;">
|
|
|
+
|
|
|
+ <form method="POST" id="inputForm">
|
|
|
+
|
|
|
+ <label for="message">Message</label>
|
|
|
+ <input id="message" name="message" value="hello!!!" type="text">
|
|
|
+ <button type="submit" style="width:100px;">Go ...</button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="serverMessageBox" style="text-align: center;">
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <div class="toppane">
|
|
|
+ <form>
|
|
|
+ <h1 style="font-size: large">Anonymous Topic Based PubSub Communication for Microblogging</h1>
|
|
|
+ <input type="text" ref="my_input" id="tweetInput">
|
|
|
+ <button @click.prevent="submitTweet()">Submit</button>
|
|
|
+ <br>
|
|
|
+ <h1 style="font-size: medium;">Input like: "text#topic1#topic2"</h1>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="leftpane">
|
|
|
+ <h1 style="font-size: large;text-align: center;">Topic list</h1>
|
|
|
+ <ol>
|
|
|
+ <li v-for="topic in topicList">
|
|
|
+ <input type="checkbox" :value="topic.topic" v-model="selectedTopics">
|
|
|
+ <label :for="topic.topic">{{topic.topic}}</label>
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="middlepane">
|
|
|
+ <h1 style="font-size: large;text-align: center;">Tweets</h1>
|
|
|
+ <ul>
|
|
|
+ <Tweet
|
|
|
+ v-for="(tweet, index) in tweets"
|
|
|
+ :key=index
|
|
|
+ :topics="tweet.topics"
|
|
|
+ :text="tweet.text"
|
|
|
+ ></Tweet>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rightpane">
|
|
|
+ <h1 style="font-size: large;text-align: center;">Topic list for archived tweets</h1>
|
|
|
+ <ol>
|
|
|
+ <li v-for="topic in topicListArchive">
|
|
|
+ <input type="checkbox" :value="topic.topic" v-model="selectedTopicsArchive">
|
|
|
+ <label :for="topic.topic">{{topic.topic}}</label>
|
|
|
+ </li>
|
|
|
+ </ol>
|
|
|
+ <br>
|
|
|
+ <ul>
|
|
|
+ <Tweet
|
|
|
+ v-for="(tweet, index) in tweetsArchive"
|
|
|
+ :key=index
|
|
|
+ :topics="tweet.topics"
|
|
|
+ :text="tweet.text"
|
|
|
+ ></Tweet>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script src="main.js"></script>
|
|
|
+</html>
|
|
|
+
|
|
|
+
|
|
|
+<style>
|
|
|
+ @import './assets/base.css';
|
|
|
+
|
|
|
+ body, html {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .leftpane {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ background-color: #0058b759;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .middlepane {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightpane {
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ float: right;
|
|
|
+ background-color: #ffd700;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toppane {
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ border-collapse: collapse;
|
|
|
+ }
|
|
|
+
|
|
|
+ form {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ </style>
|
