Report.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <template>
  2. <div class='modal is-active'>
  3. <div class='modal-background'></div>
  4. <div class='modal-card'>
  5. <header class='modal-card-head'>
  6. <p class='modal-card-title'>Report</p>
  7. <button class='delete' @click='$parent.modals.report = !$parent.modals.report'></button>
  8. </header>
  9. <section class='modal-card-body'>
  10. <div class='columns song-types'>
  11. <div class='column song-type' v-if='$parent.previousSong !== null'>
  12. <div class='card is-fullwidth' :class="{ 'is-highlight-active': isPreviousSongActive }" @click="highlight('previousSong')">
  13. <header class='card-header'>
  14. <p class='card-header-title'>
  15. Previous Song
  16. </p>
  17. </header>
  18. <div class='card-content'>
  19. <article class='media'>
  20. <figure class='media-left'>
  21. <p class='image is-64x64'>
  22. <img :src='$parent.previousSong.thumbnail' onerror='this.src="/assets/notes-transparent.png"'>
  23. </p>
  24. </figure>
  25. <div class='media-content'>
  26. <div class='content'>
  27. <p>
  28. <strong>{{ $parent.previousSong.title }}</strong>
  29. <br>
  30. <small>{{ $parent.previousSong.artists.split(' ,') }}</small>
  31. </p>
  32. </div>
  33. </div>
  34. </article>
  35. </div>
  36. <a @click=highlight('previousSong') href='#' class='absolute-a'></a>
  37. </div>
  38. </div>
  39. <div class='column song-type' v-if='$parent.currentSong !== {}'>
  40. <div class='card is-fullwidth' :class="{ 'is-highlight-active': isCurrentSongActive }" @click="highlight('currentSong')">
  41. <header class='card-header'>
  42. <p class='card-header-title'>
  43. Current Song
  44. </p>
  45. </header>
  46. <div class='card-content'>
  47. <article class='media'>
  48. <figure class='media-left'>
  49. <p class='image is-64x64'>
  50. <img :src='$parent.currentSong.thumbnail' onerror='this.src="/assets/notes-transparent.png"'>
  51. </p>
  52. </figure>
  53. <div class='media-content'>
  54. <div class='content'>
  55. <p>
  56. <strong>{{ $parent.currentSong.title }}</strong>
  57. <br>
  58. <small>{{ $parent.currentSong.artists.split(' ,') }}</small>
  59. </p>
  60. </div>
  61. </div>
  62. </article>
  63. </div>
  64. <a @click=highlight('currentSong') href='#' class='absolute-a'></a>
  65. </div>
  66. </div>
  67. </div>
  68. <div class='edit-report-wrapper'>
  69. <div class='columns is-multiline'>
  70. <div class='column is-half' v-for='issue in issues'>
  71. <label class='label'>{{ issue.name }}</label>
  72. <p class='control' v-for='reason in issue.reasons' track-by='$index'>
  73. <label class='checkbox'>
  74. <input type='checkbox' @click='toggleIssue(issue.name, reason)'>
  75. {{ reason }}
  76. </label>
  77. </p>
  78. </div>
  79. <div class='column'>
  80. <label class='label'>Other</label>
  81. <textarea class='textarea' maxlength='400' placeholder='Any other details...' @keyup='updateCharactersRemaining()' v-model='report.description'></textarea>
  82. <div class='textarea-counter'>{{ charactersRemaining }}</div>
  83. </div>
  84. </div>
  85. </div>
  86. </section>
  87. <footer class='modal-card-foot'>
  88. <a class='button is-success' @click='create()' href='#'>
  89. <i class='material-icons save-changes'>done</i>
  90. <span>&nbsp;Create</span>
  91. </a>
  92. <a class='button is-danger' @click='$parent.modals.report = !$parent.modals.report' href='#'>
  93. <span>&nbsp;Cancel</span>
  94. </a>
  95. </footer>
  96. </div>
  97. </div>
  98. </template>
  99. <script>
  100. import { Toast } from 'vue-roaster';
  101. import io from '../../io';
  102. export default {
  103. data() {
  104. return {
  105. charactersRemaining: 400,
  106. isPreviousSongActive: false,
  107. isCurrentSongActive: true,
  108. report: {
  109. resolved: false,
  110. songId: this.$parent.currentSong._id,
  111. description: '',
  112. issues: [
  113. { name: 'Video', reasons: [] },
  114. { name: 'Title', reasons: [] },
  115. { name: 'Duration', reasons: [] },
  116. { name: 'Artists', reasons: [] },
  117. { name: 'Thumbnail', reasons: [] }
  118. ]
  119. },
  120. issues: [
  121. {
  122. name: 'Video',
  123. reasons: [
  124. 'Doesn\'t exist',
  125. 'It\'s private',
  126. 'It\'s not available in my country'
  127. ]
  128. },
  129. {
  130. name: 'Title',
  131. reasons: [
  132. 'Incorrect',
  133. 'Inappropriate'
  134. ]
  135. },
  136. {
  137. name: 'Duration',
  138. reasons: [
  139. 'Skips too soon',
  140. 'Skips too late',
  141. 'Starts too soon',
  142. 'Skips too late'
  143. ]
  144. },
  145. {
  146. name: 'Artists',
  147. reasons: [
  148. 'Incorrect',
  149. 'Inappropriate'
  150. ]
  151. },
  152. {
  153. name: 'Thumbnail',
  154. reasons: [
  155. 'Incorrect',
  156. 'Inappropriate',
  157. 'Doesn\'t exist'
  158. ]
  159. }
  160. ]
  161. }
  162. },
  163. methods: {
  164. create: function () {
  165. let _this = this;
  166. _this.socket.emit('reports.create', _this.report, res => {
  167. Toast.methods.addToast(res.message, 4000);
  168. if (res.status == 'success') _this.$parent.modals.report = !_this.$parent.modals.report;
  169. });
  170. },
  171. updateCharactersRemaining: function () {
  172. this.charactersRemaining = 400 - $('.textarea').val().length;
  173. },
  174. highlight: function (type) {
  175. if (type == 'currentSong') {
  176. this.report.songId = this.$parent.currentSong._id;
  177. this.isPreviousSongActive = false;
  178. this.isCurrentSongActive = true;
  179. } else if (type == 'previousSong') {
  180. this.report.songId = this.$parent.previousSong._id;
  181. this.isCurrentSongActive = false;
  182. this.isPreviousSongActive = true;
  183. }
  184. },
  185. toggleIssue: function (name, reason) {
  186. for (let z = 0; z < this.report.issues.length; z++) {
  187. if (this.report.issues[z].name == name) {
  188. if (this.report.issues[z].reasons.indexOf(reason) > -1) {
  189. this.report.issues[z].reasons.splice(
  190. this.report.issues[z].reasons.indexOf(reason), 1
  191. );
  192. } else this.report.issues[z].reasons.push(reason);
  193. }
  194. }
  195. }
  196. },
  197. events: {
  198. closeModal: function () {
  199. this.$parent.modals.report = !this.$parent.modals.report;
  200. }
  201. },
  202. ready: function () {
  203. let _this = this;
  204. io.getSocket((socket) => {
  205. _this.socket = socket;
  206. });
  207. },
  208. }
  209. </script>
  210. <style type='scss' scoped>
  211. h6 { margin-bottom: 15px; }
  212. .song-types {
  213. margin-right: 0;
  214. }
  215. .song-type:first-of-type {
  216. padding-left: 0;
  217. }
  218. .media-content {
  219. display: flex;
  220. align-items: center;
  221. height: 64px;
  222. }
  223. .radio-controls .control {
  224. display: flex;
  225. align-items: center;
  226. }
  227. .textarea-counter {
  228. text-align: right;
  229. }
  230. @media screen and (min-width: 769px) {
  231. .radio-controls .control-label { padding-top: 0 !important; }
  232. }
  233. .edit-report-wrapper {
  234. padding: 20px;
  235. }
  236. .is-highlight-active {
  237. border: 3px #03a9f4 solid;
  238. }
  239. </style>