News.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <div class="app">
  3. <main-header />
  4. <div class="container">
  5. <div
  6. v-for="(item, index) in news"
  7. :key="index"
  8. class="card is-fullwidth"
  9. >
  10. <header class="card-header">
  11. <p class="card-header-title">
  12. {{ item.title }} - {{ formatDate(item.createdAt) }}
  13. </p>
  14. </header>
  15. <div class="card-content">
  16. <div class="content">
  17. <p>{{ item.description }}</p>
  18. </div>
  19. <div v-show="item.features.length > 0" class="sect">
  20. <div class="sect-head-features">
  21. The features are so great
  22. </div>
  23. <ul class="sect-body">
  24. <li
  25. v-for="(feature, index) in item.features"
  26. :key="index"
  27. >
  28. {{ feature }}
  29. </li>
  30. </ul>
  31. </div>
  32. <div v-show="item.improvements.length > 0" class="sect">
  33. <div class="sect-head-improvements">
  34. Improvements
  35. </div>
  36. <ul class="sect-body">
  37. <li
  38. v-for="(improvement,
  39. index) in item.improvements"
  40. :key="index"
  41. >
  42. {{ improvement }}
  43. </li>
  44. </ul>
  45. </div>
  46. <div v-show="item.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 item.bugs" :key="index">
  52. {{ bug }}
  53. </li>
  54. </ul>
  55. </div>
  56. <div v-show="item.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 item.upcoming"
  63. :key="index"
  64. >
  65. {{ upcoming }}
  66. </li>
  67. </ul>
  68. </div>
  69. </div>
  70. </div>
  71. <h3 v-if="noFound" class="center">
  72. No news items were found.
  73. </h3>
  74. </div>
  75. <main-footer />
  76. </div>
  77. </template>
  78. <script>
  79. import MainHeader from "../MainHeader.vue";
  80. import MainFooter from "../MainFooter.vue";
  81. import io from "../../io";
  82. export default {
  83. components: { MainHeader, MainFooter },
  84. data() {
  85. return {
  86. news: [],
  87. noFound: false
  88. };
  89. },
  90. mounted() {
  91. const _this = this;
  92. io.getSocket(socket => {
  93. _this.socket = socket;
  94. _this.socket.emit("news.index", res => {
  95. _this.news = res.data;
  96. if (_this.news.length === 0) _this.noFound = true;
  97. });
  98. _this.socket.on("event:admin.news.created", news => {
  99. _this.news.unshift(news);
  100. _this.noFound = false;
  101. });
  102. _this.socket.on("event:admin.news.updated", news => {
  103. for (let n = 0; n < _this.news.length; n += 1) {
  104. if (_this.news[n]._id === news._id) {
  105. _this.news.$set(n, news);
  106. }
  107. }
  108. });
  109. _this.socket.on("event:admin.news.removed", news => {
  110. _this.news = _this.news.filter(item => item._id !== news._id);
  111. if (_this.news.length === 0) _this.noFound = true;
  112. });
  113. });
  114. },
  115. methods: {
  116. formatDate: unix => {
  117. return moment(unix).format("DD-MM-YYYY");
  118. }
  119. }
  120. };
  121. </script>
  122. <style lang="scss" scoped>
  123. .card {
  124. margin-top: 50px;
  125. }
  126. .sect {
  127. div[class^="sect-head"],
  128. div[class*=" sect-head"] {
  129. padding: 12px;
  130. text-transform: uppercase;
  131. font-weight: bold;
  132. color: #fff;
  133. }
  134. .sect-head-features {
  135. background-color: dodgerblue;
  136. }
  137. .sect-head-improvements {
  138. background-color: seagreen;
  139. }
  140. .sect-head-bugs {
  141. background-color: brown;
  142. }
  143. .sect-head-upcoming {
  144. background-color: mediumpurple;
  145. }
  146. .sect-body {
  147. padding: 15px 25px;
  148. li {
  149. list-style-type: disc;
  150. }
  151. }
  152. }
  153. </style>