WhatIsNew.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <div class='modal' :class='{ "is-active": isModalActive }' v-if='news !== null'>
  3. <div class='modal-background'></div>
  4. <div class='modal-card'>
  5. <header class='modal-card-head'>
  6. <p class='modal-card-title'><strong>{{ news.title }}</strong> ({{ formatDate(news.createdAt) }})</p>
  7. <button class='delete' @click='toggleModal()'></button>
  8. </header>
  9. <section class='modal-card-body'>
  10. <div class='content'>
  11. <p>{{ news.description }}</p>
  12. </div>
  13. <div class='sect' v-show='news.features.length > 0'>
  14. <div class='sect-head-features'>The features are so great</div>
  15. <ul class='sect-body'>
  16. <li v-for='li in news.features'>{{ li }}</li>
  17. </ul>
  18. </div>
  19. <div class='sect' v-show='news.improvements.length > 0'>
  20. <div class='sect-head-improvements'>Improvements</div>
  21. <ul class='sect-body'>
  22. <li v-for='li in news.improvements'>{{ li }}</li>
  23. </ul>
  24. </div>
  25. <div class='sect' v-show='news.bugs.length > 0'>
  26. <div class='sect-head-bugs'>Bugs Smashed</div>
  27. <ul class='sect-body'>
  28. <li v-for='li in news.bugs'>{{ li }}</li>
  29. </ul>
  30. </div>
  31. <div class='sect' v-show='news.upcoming.length > 0'>
  32. <div class='sect-head-upcoming'>Coming Soon to a Musare near you</div>
  33. <ul class='sect-body'>
  34. <li v-for='li in news.upcoming'>{{ li }}</li>
  35. </ul>
  36. </div>
  37. </section>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. import io from '../../io';
  43. export default {
  44. data() {
  45. return {
  46. isModalActive: false,
  47. news: null
  48. }
  49. },
  50. ready: function () {
  51. let _this = this;
  52. io.getSocket(true, socket => {
  53. _this.socket = socket;
  54. _this.socket.emit('news.newest', res => {
  55. _this.news = res.data;
  56. if (_this.news && localStorage.getItem('firstVisited')) {
  57. if (localStorage.getItem('whatIsNew')) {
  58. if (parseInt(localStorage.getItem('whatIsNew')) < res.data.createdAt) {
  59. this.toggleModal();
  60. localStorage.setItem('whatIsNew', res.data.createdAt);
  61. }
  62. } else {
  63. if (parseInt(localStorage.getItem('firstVisited')) < res.data.createdAt) {
  64. this.toggleModal();
  65. }
  66. localStorage.setItem('whatIsNew', res.data.createdAt);
  67. }
  68. } else {
  69. if (!localStorage.getItem('firstVisited')) localStorage.setItem('firstVisited', Date.now());
  70. }
  71. });
  72. });
  73. },
  74. methods: {
  75. toggleModal: function () {
  76. this.isModalActive = !this.isModalActive;
  77. },
  78. formatDate: unix => {
  79. return moment(unix).format('DD-MM-YYYY');
  80. }
  81. },
  82. events: {
  83. closeModal: function() {
  84. this.isModalActive = false;
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang='scss' scoped>
  90. .modal-card-head {
  91. border-bottom: none;
  92. background-color: ghostwhite;
  93. padding: 15px;
  94. }
  95. .modal-card-title { font-size: 14px; }
  96. .delete {
  97. background: transparent;
  98. &:hover { background: transparent; }
  99. &:before, &:after { background-color: #bbb; }
  100. }
  101. .sect {
  102. div[class^='sect-head'], div[class*=' sect-head']{
  103. padding: 12px;
  104. text-transform: uppercase;
  105. font-weight: bold;
  106. color: #fff;
  107. }
  108. .sect-head-features { background-color: dodgerblue; }
  109. .sect-head-improvements { background-color: seagreen; }
  110. .sect-head-bugs { background-color: brown; }
  111. .sect-head-upcoming { background-color: mediumpurple; }
  112. .sect-body {
  113. padding: 15px 25px;
  114. li { list-style-type: disc; }
  115. }
  116. }
  117. </style>