GlobalSettings.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <div id="settings">
  3. <md-card>
  4. <md-card-header>
  5. <span class="md-title">Settings</span>
  6. </md-card-header>
  7. <md-card-content v-if="loggedInUser.isAdmin">
  8. <div class="md-headline">
  9. Prevent modifications from unregistered users:
  10. </div>
  11. <div class="protection-sect">
  12. <md-switch v-model="shownSettings.protectUnregistered" class="md-warn">unregistered attendees (modify and delete)</md-switch>
  13. <br />
  14. <md-switch v-model="shownSettings.protectGroupNotes" class="md-warn">group notes</md-switch>
  15. <br />
  16. <md-switch v-model="shownSettings.protectGroupName" class="md-warn">group name</md-switch>
  17. <br />
  18. <md-switch v-model="shownSettings.protectDayNotes" class="md-warn">day notes</md-switch>
  19. </div>
  20. <br />
  21. <div class="md-headline">
  22. Message of the day
  23. </div>
  24. <md-switch v-model="shownSettings.showMotd" class="md-warn">show motd</md-switch>
  25. <md-input-container v-if="shownSettings.showMotd">
  26. <label>message</label>
  27. <md-textarea v-model="shownSettings.motd"></md-textarea>
  28. </md-input-container>
  29. <br />
  30. <md-button id="save-button" class="md-raised md-primary" @click="save()">Save</md-button>
  31. </md-card-content>
  32. <md-card-content v-else>
  33. Only admin are allowed to change global settings.
  34. </md-card-content>
  35. </md-card>
  36. <ibt-dialog ref="dialogObj" />
  37. <ibt-snackbar ref="snackbarObj" />
  38. </div>
  39. </template>
  40. <script>
  41. import IbtDialog from './IbtDialog.vue';
  42. import IbtSnackbar from './IbtSnackbar.vue';
  43. export default {
  44. computed: {
  45. loggedInUser() {
  46. return this.$store.state.loggedInUser;
  47. },
  48. shownSettings() {
  49. return this.$store.state.settings || {};
  50. }
  51. },
  52. beforeCreate: function() {
  53. this.settingsUrl = this.$resource('settings');
  54. },
  55. mounted: function() {
  56. this.fetchSettings();
  57. },
  58. methods: {
  59. fetchSettings() {
  60. // XXX: duplicated code from App.vue; move this login
  61. // near the store.
  62. this.settingsUrl.get().then((response) => {
  63. return response.json();
  64. }, (response) => {
  65. this.$refs.dialogObj.show({text: 'unable to fetch settings'});
  66. }).then((json) => {
  67. if (!json || json.error) {
  68. this.$refs.dialogObj.show({text: 'unable to fetch settings: ' + (json && json.message) || ''});
  69. } else {
  70. this.$store.commit('updateSettings', json);
  71. }
  72. });
  73. },
  74. save() {
  75. this.settingsUrl.save(this.shownSettings).then((response) => {
  76. return response.json();
  77. }, (response) => {
  78. this.$refs.dialogObj.show({text: 'unable to update settings'});
  79. }).then((json) => {
  80. if (!json || json.error) {
  81. this.$refs.dialogObj.show({text: 'unable to update settings: ' + (json && json.message) || ''});
  82. } else {
  83. this.fetchSettings();
  84. this.$refs.snackbarObj.show('settings saved');
  85. }
  86. });
  87. }
  88. },
  89. components: { IbtDialog, IbtSnackbar }
  90. }
  91. </script>
  92. <style scoped>
  93. #settings {
  94. padding: 10px;
  95. }
  96. #save-button {
  97. margin-top: 40px;
  98. }
  99. .protection-sect {
  100. padding-left: 30px;
  101. }
  102. </style>