fix: disable buttons until the user sets a name

geeksforsocialchange · May 22, 2021 · 38a8814 · 38a8814
1 parent 7866f86
commit 38a8814
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/assets/mocha.html b/assets/mocha.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Mocha Tests</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css"/>
+</head>
+<body>
+<div id="mocha"></div>
+
+<script src="https://unpkg.com/chai/chai.js"></script>
+<script src="https://unpkg.com/mocha/mocha.js"></script>
+
+<script class="mocha-init">
+    var expect = chai.expect;
+    mocha.setup('bdd');
+</script>
+
+<script>
+
+    var sum = function () {
+        return 0;
+    }
+    describe('#sum()', function () {
+        context('without arguments', function () {
+            it('should return 0', function () {
+                expect(sum()).to.equal(0)
+            })
+        })
+    })
+</script>
+
+<script class="mocha-exec">
+    mocha.run();
+</script>
+</body>
+</html>
diff --git a/assets/room.js b/assets/room.js
@@ -17,6 +17,11 @@ const app = new Vue({
         ],
         userMoods: []
     },
+    computed: {
+        isReady: function () {
+            return this.user.length > 0
+        }
+    },
     methods: {
         deleteUserMood: function (username = this.user) {
             const body = JSON.stringify({

diff --git a/room.html b/room.html
@@ -17,7 +17,7 @@
 <div id="app">
     <input v-model="user" placeholder="username"> <span v-on:click="deleteUserMood(user)">×</span>
     <p>Room number: <span id="roomnumber">{{ room }}</span></p>
-    <button v-for="(mood, index) in moods" v-on:click="sendMood(mood)">{{ mood }}</button>
+    <button v-for="(mood, index) in moods" v-on:click="sendMood(mood)" v-bind:disabled="!isReady">{{ mood }}</button>
     <div class="mood-list">
         <article class="mood" v-for="(item, index) in userMoods" v-on:click="deleteUserMood(item.username)"><span
                 id="mooduser">{{item.username}}</span> :: <span id="mood">{{item.mood}}</span></article>