Preferences.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div class="content preferences-tab">
  3. <h4 class="section-title">Change preferences</h4>
  4. <p class="section-description">Tailor these settings to your liking.</p>
  5. <hr class="section-horizontal-rule" />
  6. <p class="control is-expanded checkbox-control">
  7. <input type="checkbox" id="nightmode" v-model="localNightmode" />
  8. <label for="nightmode">
  9. <span></span>
  10. <p>Use nightmode</p>
  11. </label>
  12. </p>
  13. <p class="control is-expanded checkbox-control">
  14. <input
  15. type="checkbox"
  16. id="autoSkipDisliked"
  17. v-model="localAutoSkipDisliked"
  18. />
  19. <label for="autoSkipDisliked">
  20. <span></span>
  21. <p>Automatically vote to skip disliked songs</p>
  22. </label>
  23. </p>
  24. <p class="control is-expanded checkbox-control">
  25. <input
  26. type="checkbox"
  27. id="activityLogPublic"
  28. v-model="localActivityLogPublic"
  29. />
  30. <label for="activityLogPublic">
  31. <span></span>
  32. <p>Allow my activity log to be viewed publicly</p>
  33. </label>
  34. </p>
  35. <save-button ref="saveButton" @clicked="saveChanges()" />
  36. </div>
  37. </template>
  38. <script>
  39. import { mapState, mapActions, mapGetters } from "vuex";
  40. import Toast from "toasters";
  41. import SaveButton from "@/components/SaveButton.vue";
  42. export default {
  43. components: { SaveButton },
  44. data() {
  45. return {
  46. localNightmode: false,
  47. localAutoSkipDisliked: false,
  48. localActivityLogPublic: false
  49. };
  50. },
  51. computed: {
  52. ...mapState({
  53. nightmode: state => state.user.preferences.nightmode,
  54. autoSkipDisliked: state => state.user.preferences.autoSkipDisliked,
  55. activityLogPublic: state => state.user.preferences.activityLogPublic
  56. }),
  57. ...mapGetters({
  58. socket: "websockets/getSocket"
  59. })
  60. },
  61. mounted() {
  62. this.socket.dispatch("users.getPreferences", res => {
  63. if (res.status === "success") {
  64. this.localNightmode = res.data.nightmode;
  65. this.localAutoSkipDisliked = res.data.autoSkipDisliked;
  66. this.localActivityLogPublic = res.data.activityLogPublic;
  67. }
  68. });
  69. this.socket.on("keep.event:user.preferences.changed", preferences => {
  70. this.localNightmode = preferences.nightmode;
  71. this.localAutoSkipDisliked = preferences.autoSkipDisliked;
  72. this.localActivityLogPublic = preferences.activityLogPublic;
  73. });
  74. },
  75. methods: {
  76. saveChanges() {
  77. if (
  78. this.localNightmode === this.nightmode &&
  79. this.localAutoSkipDisliked === this.autoSkipDisliked &&
  80. this.localActivityLogPublic === this.activityLogPublic
  81. ) {
  82. new Toast({
  83. content: "Please make a change before saving.",
  84. timeout: 5000
  85. });
  86. return this.$refs.saveButton.handleFailedSave();
  87. }
  88. this.$refs.saveButton.status = "disabled";
  89. return this.socket.dispatch(
  90. "users.updatePreferences",
  91. {
  92. nightmode: this.localNightmode,
  93. autoSkipDisliked: this.localAutoSkipDisliked,
  94. activityLogPublic: this.localActivityLogPublic
  95. },
  96. res => {
  97. if (res.status !== "success") {
  98. new Toast({ content: res.message, timeout: 8000 });
  99. return this.$refs.saveButton.handleFailedSave();
  100. }
  101. new Toast({
  102. content: "Successfully updated preferences",
  103. timeout: 4000
  104. });
  105. return this.$refs.saveButton.handleSuccessfulSave();
  106. }
  107. );
  108. },
  109. ...mapActions("user/preferences", [
  110. "changeNightmode",
  111. "changeAutoSkipDisliked",
  112. "changeActivityLogPublic"
  113. ])
  114. }
  115. };
  116. </script>
  117. <style lang="scss" scoped>
  118. .checkbox-control {
  119. input[type="checkbox"] {
  120. opacity: 0;
  121. position: absolute;
  122. }
  123. label {
  124. display: flex;
  125. flex-direction: row;
  126. align-items: center;
  127. span {
  128. cursor: pointer;
  129. width: 24px;
  130. height: 24px;
  131. background-color: var(--white);
  132. display: inline-block;
  133. border: 1px solid var(--dark-grey-2);
  134. position: relative;
  135. border-radius: 3px;
  136. }
  137. p {
  138. margin-left: 10px;
  139. }
  140. }
  141. input[type="checkbox"]:checked + label span::after {
  142. content: "";
  143. width: 18px;
  144. height: 18px;
  145. left: 2px;
  146. top: 2px;
  147. border-radius: 3px;
  148. background-color: var(--primary-color);
  149. position: absolute;
  150. }
  151. }
  152. </style>