index.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <title>HybridOSN - Dashboard - Trending Topics</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <meta name="author" content="Carsten Porth <carsten.porth@stud.tu-darmstadt.de" />
  9. <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css" />
  10. <link rel="stylesheet" href="style.css">
  11. </head>
  12. <body>
  13. <nav class="navbar navbar-expand-md navbar-light bg-light">
  14. <a href="#" class="navbar-brand">HybridOSN - Dashboard</a>
  15. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  16. <span class="navbar-toggler-icon"></span>
  17. </button>
  18. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  19. <ul class="navbar-nav ml-auto">
  20. <li class="nav-item">
  21. <span class="nav-link" data-toggle="modal" data-target="#aboutModal" style="cursor: pointer">
  22. About
  23. </span>
  24. </li>
  25. </ul>
  26. </div>
  27. </nav>
  28. <!-- about modal -->
  29. <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-hidden="true">
  30. <div class="modal-dialog" role="document">
  31. <div class="modal-content">
  32. <div class="modal-header">
  33. <h5 class="modal-title" id="exampleModalLabel">About HybridOSN</h5>
  34. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  35. <span aria-hidden="true">&times;</span>
  36. </button>
  37. </div>
  38. <div class="modal-body">
  39. <p>tbd;</p>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="container mt-3" id="app">
  45. <h1 class="mb-4">
  46. Trending Topics on <input type="date" v-model="date" v-on:change="loadHashtags">
  47. </h1>
  48. <div class="row">
  49. <div class="col-md-6 offset-md-3">
  50. <!-- hashtag ranking -->
  51. <table class="table table-striped table-hover" v-if="hashtagRanking.length">
  52. <thead>
  53. <tr>
  54. <th scope="col" class="text-center">Rank</th>
  55. <th scope="col">Hashtag</th>
  56. <th scope="col" class="text-right">Counts</th>
  57. </tr>
  58. </thead>
  59. <tbody>
  60. <tr v-for="(hashtagRank, index) in hashtagRanking">
  61. <th scope="row" class="text-center">{{ index + 1 }}.</th>
  62. <td>{{ hashtagRank.hashtags }}</td>
  63. <td class="text-right">{{ hashtagRank.counts }}</td>
  64. </tr>
  65. </tbody>
  66. </table>
  67. </div>
  68. </div>
  69. <!-- loading overlay -->
  70. <div class="loading-overlay" v-if="showLoading">
  71. <div class="loading-container">
  72. <div class="spinner-border" style="width: 4rem; height: 4rem;" role="status">
  73. <span class="sr-only">Loading...</span>
  74. </div>
  75. <div class="loading-progress mt-3">
  76. Loading {{ done }} of {{ total }}
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  82. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  83. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  84. <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
  85. <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
  86. <script src="https://cdn.jsdelivr.net/npm/gun/lib/then.js"></script>
  87. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
  88. <script src="app.js"></script>
  89. </body>
  90. </html>