Master

.env

@@ -1,2 +1 @@
-VUE_APP_DOMAIN=sizematters.dev
 VUE_APP_BACKEND='wss://ws.sizematters.dev'

api/data.ts

@@ -2,6 +2,14 @@ export interface UserData {
   user_id: string;
   name: string;
   gravatar_id: string;
+  active: boolean;
+}
+
+export interface Scale
+{
+  name: string;
+  displayName: string;
+  values: string[]
 }
 
 export class RoomStatus {
@@ -10,6 +18,8 @@ export class RoomStatus {
   users: UserData[];
   votes_cast: number;
   selected_user: string;
+  scale_values: Map<string, Scale>;
+  selected_scale_name: string;
 }
 
 export interface UserIdRoom {
@@ -45,6 +55,7 @@ export interface VoteResults {
 export interface RoomData {
   room_name: string;
   selected_user_id: string;
+  selected_scale: Scale;
 }
 
 export class BoxedValue<T> {

api/room.store.ts

@@ -1,4 +1,4 @@
-import { RoomStatus, UserRoom, UserIdRoom } from "./data";
+import {RoomStatus, UserRoom, UserIdRoom, Scale} from "./data";
 
 import userStore from "./user.store";
 
@@ -14,6 +14,13 @@ function getRoom(roomName: string): RoomStatus {
   return room;
 }
 
+function getNumbers(roomName: string):string[]
+{
+  const room = getRoom(roomName);
+  const numbers =  room.scale_values[room.selected_scale_name].values;
+  return numbers;
+}
+
 function roomJoined(roomStatus: RoomStatus) {
   roomMap.set(roomStatus.room_name, roomStatus);
   rooms.push(roomStatus);
@@ -75,6 +82,36 @@ function randomized(roomName: string, selectedUser: string) {
   room.selected_user = selectedUser;
 }
 
+function scaleChanged(roomName: string, selectedScaleName: string) {
+  const room = getRoom(roomName);
+  // eslint-disable-next-line
+  room.selected_scale_name = selectedScaleName;
+}
+function roomUrl(roomStatus: RoomStatus): string
+{
+  return window.location.protocol +
+  "//" +
+  window.location.host +
+  "/room/" +
+  roomStatus.room_name +
+  "/" +
+  roomStatus.hashed_password;
+}
+
+function textToClipboard (text) {
+  const dummy = document.createElement("textarea");
+  document.body.appendChild(dummy);
+  dummy.value = text;
+  dummy.select();
+  document.execCommand("copy");
+  document.body.removeChild(dummy);
+}
+
+function copyRoomUrl(roomStatus: RoomStatus)
+{
+  textToClipboard(roomUrl(roomStatus));
+}
+
 export default {
   rooms(): Array<RoomStatus> {
     return rooms;
@@ -84,6 +121,12 @@ export default {
     return getRoom(roomName);
   },
 
+  numbers(roomName: string): string[]
+  {
+    return getNumbers(roomName);
+
+  },
+
   roomJoined(roomStatus: RoomStatus) {
     roomJoined(roomStatus);
   },
@@ -106,5 +149,19 @@ export default {
 
   randomized(roomName: string, selectedUser: string) {
     randomized(roomName, selectedUser);
+  },
+
+  scaleChanged(roomName: string, selectedScale: Scale)
+  {
+    scaleChanged(roomName, selectedScale.name);
+
+  },
+  roomUrl(roomStatus: RoomStatus): string
+  {
+    return roomUrl(roomStatus);
+  },
+  copyRoomUrl(roomStatus: RoomStatus)
+  {
+    copyRoomUrl(roomStatus);
   }
 };

api/user.store.ts

@@ -32,6 +32,16 @@ function setNameSet() {
   nameSet.value = true;
 }
 
+function activeUpdated(userData: UserData)
+{
+  const user = users.get(userData.user_id);
+  if(user !== undefined )
+  {
+    // eslint-disable-next-line
+    user.active = userData.active;
+  }
+}
+
 export default {
   users(): Map<string, UserData> {
     return users;
@@ -63,5 +73,9 @@ export default {
 
   setNameSet() {
     setNameSet();
+  },
+  activeUpdated(userData: UserData)
+  {
+    activeUpdated(userData);
   }
 };

api/websocket.ts

@@ -2,6 +2,7 @@ import Vue from "vue";
 import roomStore from "./room.store";
 import userStore from "./user.store";
 import voteStore from "./vote.store";
+import config from "./config.helper";
 
 let socket: WebSocket;
 const eventBus = new Vue();
@@ -47,8 +48,14 @@ function processMessage(msg: MessageEvent) {
     case "Randomized":
       roomStore.randomized(data.data.room_name, data.data.selected_user_id);
       break;
+    case "ScaleChanged":
+      roomStore.scaleChanged(data.data.room_name, data.data.selected_scale);
+      break;
+    case "ActiveUpdated":
+      userStore.activeUpdated(data.data);
+      break;
     default:
-      console.log("message not handled:" + data.type);
+      console.log("websocket.processMessage: message not handled:" + data.type);
   }
 }
 
@@ -66,6 +73,10 @@ function setName(name: string) {
   userStore.setNameSet();
 }
 
+function updateActive(roomName: string, userId: string, active: boolean) {
+  sendMessage("UpdateActive", { "room_name": roomName, "user_id": userId, "active": active });
+}
+
 function setAvatar(email: string) {
   sendMessage("SetAvatar", { avatar: email });
   localStorage.setItem("avatar", email);
@@ -103,47 +114,55 @@ export default {
   },
 
   connect(successCallback: Function, failureCallback: Function) {
-    socket = new WebSocket(process.env.VUE_APP_BACKEND);
+    socket = new WebSocket(config.getConfiguredServer());
     socket.onmessage = msg => processMessage(msg);
     checkConnection(successCallback, failureCallback);
   },
 
   joinRoom(roomName: string, password: string, passwordIsHash: boolean) {
     // eslint-disable-next-line
-    sendMessage("JoinRoom", { room_name: roomName, password: password, password_is_hash: passwordIsHash });
+    sendMessage("JoinRoom", { "room_name": roomName, "password": password, "password_is_hash": passwordIsHash });
   },
 
   leaveRoom(roomName: string) {
     // eslint-disable-next-line
-    sendMessage("LeaveRoom", { room_name: roomName });
+    sendMessage("LeaveRoom", { "room_name": roomName });
   },
 
   vote(roomName: string, size: number) {
     // eslint-disable-next-line
-    sendMessage("Vote", { room_name: roomName, size: size });
+    sendMessage("Vote", { "room_name": roomName, size: size });
   },
 
   newVote(roomName: string) {
     // eslint-disable-next-line
-    sendMessage("NewVote", { room_name: roomName });
+    sendMessage("NewVote", { "room_name": roomName });
   },
 
   randomize(roomName: string) {
-    // eslint-disable-next-line
-    sendMessage("Randomize", { room_name: roomName });
+    sendMessage("Randomize", { "room_name": roomName });
   },
 
   register() {
     sendMessage("Register", null);
   },
 
+  changeScale(roomName: string, selectedScaleName: string) {
+    sendMessage("ChangeScale", {"room_name": roomName, "selected_scale_name": selectedScaleName } );
+  },
+
   setAvatar(email: string) {
     setAvatar(email);
   },
 
   setName(name: string) {
     setName(name);
   },
+
+  updateActive(roomName: string, userId: string, active: boolean)
+  {
+      updateActive(roomName, userId, active);
+  },
 
   on(event: string, callback: Function) {
     eventBus.$on(event, data => callback(data));

package.json

@@ -19,19 +19,19 @@
     "yarn": "^1.22.17"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.10.0",
-    "@typescript-eslint/parser": "^5.10.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.4.6",
-    "@vue/cli-plugin-eslint": "~4.4.6",
+    "@vue/cli-plugin-eslint": "~4.4.0",
     "@vue/cli-plugin-router": "~4.4.6",
     "@vue/cli-plugin-typescript": "~4.4.6",
     "@vue/cli-service": "~4.4.6",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^8.3.0",
-    "prettier": "^2.1.1",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^1.19.1",
     "sass": "^1.49.0",
     "sass-loader": "^8.0.2",
     "typescript": "^3.9.10",

src/components/Room.vue

@@ -2,9 +2,13 @@
   <md-card class="room">
     <md-card-header class="header">
       <div class="md-title">
-        {{ roomName }} - https://{{ domain }}/room/{{ roomName }}/{{
-          roomStatus.hashed_password
-        }}
+        {{roomInfo}}
+      <md-button
+          class="md-raised"
+          @click="copyRoomUrl"
+      >
+        Copy Url
+      </md-button>
       </div>
     </md-card-header>
     <md-card-content class="user-space">
@@ -67,9 +71,9 @@ export default class Room extends Vue {
   vote = voteStore.getOwnVote(this.roomName);
   selected = "";
   votingDone = false;
-  domain = process.env.VUE_APP_DOMAIN;
+  roomInfo = "";
 
-  numbers: number[] = [0, 1, 2, 3, 5, 8, 13, 21];
+  numbers: string[] = [];
 
   onVotingResults(roomData: RoomData) {
     if (this.roomName == roomData.room_name) {
@@ -100,10 +104,38 @@ export default class Room extends Vue {
     }
   }
 
+  onScaleChanged(roomData?: RoomData)
+  {
+    if(roomData)
+    {
+      this.numbers = roomData.selected_scale.values;
+    }
+    else
+    {
+      this.numbers = this.roomStatus.scale_values[this.roomStatus.selected_scale_name].values;
+    }
+  }
+
+  updateRoomInfo()
+  {
+    this.roomInfo =
+        this.roomName +
+        " - " +
+        roomStore.roomUrl(this.roomStatus);
+  }
+
+  copyRoomUrl()
+  {
+    roomStore.copyRoomUrl(this.roomStatus);
+  }
+
   created() {
+    this.updateRoomInfo()
+    this.onScaleChanged();
     websocket.on("VoteResults", this.onVotingResults);
     websocket.on("NewVote", this.onNewVote);
     websocket.on("Randomized", this.onRandomized);
+    websocket.on("ScaleChanged", this.onScaleChanged);
   }
 
   castVote(value) {

src/components/UserCard.vue

@@ -16,6 +16,7 @@
     <md-card-media>
       <Gravatar v-bind:gravatar="userData.gravatar_id" class="user-pic" />
       <div class="user-size">{{ userVote.value }}</div>
+      <md-switch v-model="userData.active" v-on="activeChanged()">Active</md-switch>
     </md-card-media>
   </md-card>
 </template>
@@ -26,6 +27,7 @@ import { UserData } from "@/../api/data";
 import voteStore from "@/../api/vote.store";
 import userStore from "@/../api/user.store";
 import Gravatar from "./Gravatar.vue";
+import websocket from "../../api/websocket";
 
 @Component({ components: { Gravatar } })
 export default class UserCard extends Vue {
@@ -52,6 +54,10 @@ export default class UserCard extends Vue {
       .map(n => n.toString())
       .join("");
   }
+  activeChanged()
+  {
+    websocket.updateActive(this.roomName, this.userData!.user_id, this.userData!.active)
+  }
 }
 </script>