WhatIsNew.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <div
  3. v-if="news !== null"
  4. class="modal"
  5. :class="{ 'is-active': isModalActive }"
  6. >
  7. <div class="modal-background" />
  8. <div class="modal-card">
  9. <header class="modal-card-head">
  10. <p class="modal-card-title">
  11. <strong>{{ news.title }}</strong>
  12. ({{ formatDate(news.createdAt) }})
  13. </p>
  14. <button class="delete" v-on:click="toggleModal()" />
  15. </header>
  16. <section class="modal-card-body">
  17. <div class="content">
  18. <p>{{ news.description }}</p>
  19. </div>
  20. <div v-show="news.features.length > 0" class="sect">
  21. <div class="sect-head-features">
  22. The features are so great
  23. </div>
  24. <ul class="sect-body">
  25. <li
  26. v-for="(feature, index) in news.features"
  27. :key="index"
  28. >
  29. {{ feature }}
  30. </li>
  31. </ul>
  32. </div>
  33. <div v-show="news.improvements.length > 0" class="sect">
  34. <div class="sect-head-improvements">
  35. Improvements
  36. </div>
  37. <ul class="sect-body">
  38. <li
  39. v-for="(improvement, index) in news.improvements"
  40. :key="index"
  41. >
  42. {{ improvement }}
  43. </li>
  44. </ul>
  45. </div>
  46. <div v-show="news.bugs.length > 0" class="sect">
  47. <div class="sect-head-bugs">
  48. Bugs Smashed
  49. </div>
  50. <ul class="sect-body">
  51. <li v-for="(bug, index) in news.bugs" :key="index">
  52. {{ bug }}
  53. </li>
  54. </ul>
  55. </div>
  56. <div v-show="news.upcoming.length > 0" class="sect">
  57. <div class="sect-head-upcoming">
  58. Coming Soon to a Musare near you
  59. </div>
  60. <ul class="sect-body">
  61. <li
  62. v-for="(upcoming, index) in news.upcoming"
  63. :key="index"
  64. >
  65. {{ upcoming }}
  66. </li>
  67. </ul>
  68. </div>
  69. </section>
  70. </div>
  71. </div>
  72. </template>
  73. <script>
  74. import io from "../../io";
  75. export default {
  76. data() {
  77. return {
  78. isModalActive: false,
  79. news: null
  80. };
  81. },
  82. mounted() {
  83. const _this = this;
  84. io.getSocket(true, socket => {
  85. _this.socket = socket;
  86. _this.socket.emit("news.newest", res => {
  87. _this.news = res.data;
  88. if (_this.news && localStorage.getItem("firstVisited")) {
  89. if (localStorage.getItem("whatIsNew")) {
  90. if (
  91. parseInt(localStorage.getItem("whatIsNew")) <
  92. res.data.createdAt
  93. ) {
  94. this.toggleModal();
  95. localStorage.setItem(
  96. "whatIsNew",
  97. res.data.createdAt
  98. );
  99. }
  100. } else {
  101. if (
  102. parseInt(localStorage.getItem("firstVisited")) <
  103. res.data.createdAt
  104. ) {
  105. this.toggleModal();
  106. }
  107. localStorage.setItem("whatIsNew", res.data.createdAt);
  108. }
  109. } else if (!localStorage.getItem("firstVisited"))
  110. localStorage.setItem("firstVisited", Date.now());
  111. });
  112. });
  113. },
  114. methods: {
  115. toggleModal() {
  116. this.isModalActive = !this.isModalActive;
  117. },
  118. formatDate: unix => {
  119. return moment(unix).format("DD-MM-YYYY");
  120. }
  121. },
  122. events: {
  123. closeModal() {
  124. this.isModalActive = false;
  125. }
  126. }
  127. };
  128. </script>
  129. <style lang="scss" scoped>
  130. .modal-card-head {
  131. border-bottom: none;
  132. background-color: ghostwhite;
  133. padding: 15px;
  134. }
  135. .modal-card-title {
  136. font-size: 14px;
  137. }
  138. .delete {
  139. background: transparent;
  140. &:hover {
  141. background: transparent;
  142. }
  143. &:before,
  144. &:after {
  145. background-color: #bbb;
  146. }
  147. }
  148. .sect {
  149. div[class^="sect-head"],
  150. div[class*=" sect-head"] {
  151. padding: 12px;
  152. text-transform: uppercase;
  153. font-weight: bold;
  154. color: #fff;
  155. }
  156. .sect-head-features {
  157. background-color: dodgerblue;
  158. }
  159. .sect-head-improvements {
  160. background-color: seagreen;
  161. }
  162. .sect-head-bugs {
  163. background-color: brown;
  164. }
  165. .sect-head-upcoming {
  166. background-color: mediumpurple;
  167. }
  168. .sect-body {
  169. padding: 15px 25px;
  170. li {
  171. list-style-type: disc;
  172. }
  173. }
  174. }
  175. </style>