SPIN
/
HOSN-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>HybridOSN - Dashboard - Trending Topics</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="Carsten Porth <carsten.porth@stud.tu-darmstadt.de" />

  <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">HybridOSN - Dashboard</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <span class="nav-link" data-toggle="modal" data-target="#aboutModal" style="cursor: pointer">
            About
          </span>
        </li>
      </ul>
    </div>
  </nav>

  <!-- about modal -->
  <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">About HybridOSN</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>tbd;</p>
        </div>
      </div>
    </div>
  </div>

  <div class="container mt-3" id="app">
    <h1 class="mb-4">
      Trending Topics on <input type="date" v-model="date" v-on:change="loadHashtags">
    </h1>
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <!-- hashtag ranking -->
        <table class="table table-striped table-hover" v-if="hashtagRanking.length">
          <thead>
            <tr>
              <th scope="col" class="text-center">Rank</th>
              <th scope="col">Hashtag</th>
              <th scope="col" class="text-right">Counts</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(hashtagRank, index) in hashtagRanking">
              <th scope="row" class="text-center">{{ index + 1 }}.</th>
              <td>{{ hashtagRank.hashtags }}</td>
              <td class="text-right">{{ hashtagRank.counts }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- loading overlay -->
    <div class="loading-overlay" v-if="showLoading">
      <div class="loading-container">
        <div class="spinner-border" style="width: 4rem; height: 4rem;" role="status">
          <span class="sr-only">Loading...</span>
        </div>
        <div class="loading-progress mt-3">
          Loading {{ done }} of {{ total }}
        </div>
      </div>
    </div>
  </div>

  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gun/lib/then.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
  <script src="app.js"></script>
</body>

</html>