Update room color handling

client/src/components/rooms/NewRoom.vue

@@ -1,14 +1,17 @@
 <template>
   <div class="new-room">
     <div class="new-room__content">
-      <h1 class="new-room__heading">Neues Board</h1>
+      <h1 class="new-room__heading">Neues Board {{room.title}}</h1>
 
       <h2 class="new-room__property-heading">Titel</h2>
-      <input class="skillbox-input new-room__input">
+      <input class="skillbox-input new-room__input" v-model="room.title">
       <h2 class="new-room__property-heading">Beschreibung</h2>
-      <textarea class="skillbox-textarea new-room__textarea"></textarea>
+      <textarea class="skillbox-textarea new-room__textarea" v-model="room.description"></textarea>
       <h2 class="new-room__property-heading">Farbe</h2>
-      <room-colors></room-colors>
+      <room-colors
+        :selected-color="room.appearance"
+        v-on:input="updateColor"
+      ></room-colors>
     </div>
     <div class="new-room__footer">
       <button class="button button--primary new-room__save-button">Speichern</button>
@@ -21,13 +24,33 @@
 <script>
   import RoomColors from '@/components/rooms/RoomColors';
 
+  const defaultColor = 'blue';
+
   export default {
     components: {
       RoomColors
     },
 
+    data() {
+      return {
+        room: {
+          appearance: defaultColor,
+          title: '',
+          description: '',
+          userGroup: 1
+        }
+      }
+    },
+
+    methods: {
+      updateColor(newColor) {
+        this.room.appearance = newColor;
+        this.$store.dispatch('setSpecialContainerClass', newColor);
+      }
+    },
+
     created() {
-      this.$store.dispatch('setSpecialContainerClass', 'red');
+      this.$store.dispatch('setSpecialContainerClass', defaultColor);
     },
 
     beforeDestroy() {

client/src/components/rooms/RoomColors.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="room-colors">
-    <div v-for="color in colors" class="room-colors__color-wrapper"
+    <div v-for="(color, index) in colors"
-         :class="{'room-colors__color-wrapper--selected': color.selected}">
+         :key="index"
+         class="room-colors__color-wrapper"
+         @click="$emit('input', color.name)"
+         :class="{'room-colors__color-wrapper--selected': selectedColor === color.name}">
       <div class="room-colors__color" :class="'room-colors__color--' + color.name">
-        <tick class="room-colors__selected-icon" v-if="color.selected"></tick>
+        <tick class="room-colors__selected-icon" v-if="selectedColor === color.name"></tick>
       </div>
     </div>
   </div>
@@ -13,12 +16,13 @@
   import Tick from '@/components/icons/Tick';
 
   export default {
+    props: ['selected-color'],
+
     data() {
       return {
         colors: [
           {
-            name: 'yellow',
+            name: 'yellow'
-            selected: true
           },
           {
             name: 'blue'

client/src/layouts/DefaultLayout.vue

@@ -64,16 +64,17 @@
     -ms-grid-rows: auto 32px 1fr; // 1 extra row for gap
     -ms-grid-columns: 1fr;
 
-    &--red { // todo: define a better name when usage is clear
+    &--yellow {
-      background-color: $red;
+      background-color: $color-accent-1;
     }
-
+    &--blue {
-    &--green { // todo: define a better name when usage is clear
+      background-color: $color-accent-2;
-      background-color: $green;
     }
-
+    &--red {
-    &--brown { // todo: define a better name when usage is clear
+      background-color: $color-accent-3;
-      background-color: $brown;
+    }
+    &--green {
+      background-color: $color-accent-4;
     }
 
     &__header {