simon.muchau
/
AnonymousTopicBasedPubSubCommunicationforMicroblogging


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!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>