[WIP] Began adding tavern and party (#8814)

* Began adding tavern and party

* Fixed routing conflicts and tavern constant

* Updated button styles

* Added not on quest block

* Added no challenge block

* Began adding quest details

* Began updating group create modal to have party info

* Added create party modal

* Added share userid menu

* Began adding toggle

* Finished toggle styles

* Added start quest modal

* Ported over party ctrl code

* Finished porting over party ctrl code

* Added more quest actions

* Added own quests modal and quest modal details

* Fixed member modal styles and icons

* Added many random style updates

* Small text align fix

* Removed extra update

* Removed config and extra key

* Removed client string extras

website/client/components/ui/toggleSwitch.vue

@@ -4,8 +4,9 @@
   .toggle-switch.float-left
     input.toggle-switch-checkbox(
       type='checkbox', :id="id",
-      @change="$emit('change', $event.target.checked)",
-      :checked="checked",
+      @change="handleChange",
+      :checked="isChecked",
+      :value="value",
     )
     label.toggle-switch-label(:for="id")
       span.toggle-switch-inner
@@ -13,88 +14,88 @@
 </template>
 
 <style lang="scss" scoped>
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.toggle-switch-container {
-  margin-top: 6px;
-}
+  .toggle-switch-container {
+    margin-top: 6px;
+  }
 
-.toggle-switch {
-  position: relative;
-  width: 40px;
-  user-select: none;
-  margin-left: 9px;
-}
+  .toggle-switch {
+    position: relative;
+    width: 40px;
+    user-select: none;
+    margin-left: 9px;
+  }
 
-.toggle-switch-description {
-  height: 20px;
-  border-bottom: 1px dashed $gray-200;
-}
+  .toggle-switch-description {
+    height: 20px;
+    border-bottom: 1px dashed $gray-200;
+  }
 
-.toggle-switch-checkbox {
-  display: none;
-}
+  .toggle-switch-checkbox {
+    display: none;
+  }
 
-.toggle-switch-label {
-  display: block;
-  overflow: hidden;
-  cursor: pointer;
-  border-radius: 100px;
-  margin-bottom: 0px;
-  margin-top: 3px;
-}
+  .toggle-switch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 100px;
+    margin-bottom: 0px;
+    margin-top: 3px;
+  }
 
-.toggle-switch-inner {
-  display: block;
-  width: 200%;
-  margin-left: -100%;
-  transition: margin 0.3s ease-in 0s;
-}
+  .toggle-switch-inner {
+    display: block;
+    width: 200%;
+    margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+  }
 
-.toggle-switch-inner:before, .toggle-switch-inner:after {
-  display: block;
-  float: left;
-  width: 50%;
-  height: 16px;
-  padding: 0;
-}
+  .toggle-switch-inner:before, .toggle-switch-inner:after {
+    display: block;
+    float: left;
+    width: 50%;
+    height: 16px;
+    padding: 0;
+  }
 
-.toggle-switch-inner:before {
-  content: "";
-  padding-left: 10px;
-  background-color: $purple-400;
-}
+  .toggle-switch-inner:before {
+    content: "";
+    padding-left: 10px;
+    background-color: $purple-400;
+  }
 
-.toggle-switch-inner:after {
-  content: "";
-  padding-right: 10px;
-  background-color: $gray-200;
-  text-align: right;
-}
+  .toggle-switch-inner:after {
+    content: "";
+    padding-right: 10px;
+    background-color: $gray-200;
+    text-align: right;
+  }
 
-.toggle-switch-switch {
-  box-shadow: 0 1px 2px 0 rgba($black, 0.32);
-  display: block;
-  width: 20px;
-  margin: -2px;
-  margin-top: 1px;
-  height: 20px;
-  background: $white;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 22px;
-  border-radius: 100px;
-  transition: all 0.3s ease-in 0s;
-}
+  .toggle-switch-switch {
+    box-shadow: 0 1px 2px 0 rgba($black, 0.32);
+    display: block;
+    width: 20px;
+    margin: -2px;
+    margin-top: 1px;
+    height: 20px;
+    background: $white;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 22px;
+    border-radius: 100px;
+    transition: all 0.3s ease-in 0s;
+  }
 
-.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
-  margin-left: 0;
-}
+  .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-inner {
+    margin-left: 0;
+  }
 
-.toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
-  right: 0px;
-}
+  .toggle-switch-checkbox:checked + .toggle-switch-label .toggle-switch-switch {
+    right: 0px;
+  }
 </style>
 
 <script>
@@ -105,7 +106,14 @@ export default {
       id: Math.random(),
     };
   },
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
   props: {
+    value: {
+      default: true,
+    },
     label: {
       type: String,
       required: true,
@@ -115,5 +123,15 @@ export default {
       default: false,
     },
   },
+  computed: {
+    isChecked () {
+      return this.checked === this.value;
+    },
+  },
+  methods: {
+    handleChange ({ target: { checked } }) {
+      this.$emit('change', checked ? this.value : this.uncheckedValue);
+    },
+  },
 };
 </script>