Creates tasks with working description auto-height and status dropdow…

…ns. Also eliminates user list section.
ardamose123 · Jun 8, 2016 · 2dcf45c · 2dcf45c
1 parent 409dcde
commit 2dcf45c
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 62 deletions.
diff --git a/workboard-frontend/index.html b/workboard-frontend/index.html
@@ -15,10 +15,7 @@
     <span class="item">Workboard</span>
   </nav>
   <div class="ui centered stackable grid" style="padding-top: 5em;">
-    <aside class="three wide column">
-      <div class="ui blue link vertical fluid menu" id="user-list"></div>
-    </aside>
-    <section class="twelve wide column">
+    <section class="fifteen wide column">
       <div class="ui cards"></div>
     </section>
   </div>

diff --git a/workboard-frontend/test.html b/workboard-frontend/test.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Test</title>
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"></script>
+    <script type="text/javascript">
+      function tellEveryone()
+      {
+        var payload = {};
+        payload.user = $('#user').val();
+        payload.content = $('#message').val();
+
+        $.post({
+          url : 'http://localhost/api/',
+          data: JSON.stringify(payload),
+          contentType: 'application/json',
+          success: function(serialId) {
+            console.log("Uploaded serial: " + serialId);
+          }
+        });
+      }
+
+      var lastSID = 0;
+      function update()
+      {
+        console.log('Waiting for news...');
+
+        $.get({
+          url : 'http://localhost/api/' + lastSID,
+          contentType: 'application/json',
+          success: function(message) {
+            $('#messages').append('<div>' + message.content + '<br>(By ' + message.user + ')</div>');
+            lastSID++;
+            update();
+          }
+        });
+      }
+
+      update();
+    </script>
+  </head>
+  <body>
+    <div class="">
+      <input type="text" id="user" name="user" value="" placeholder="User">
+      <input type="text" id="message" name="message" value="" placeholder="Message">
+      <input type="button" value="Submit" onclick="tellEveryone();">
+    </div>
+    <div id="messages"></div>
+  </body>
+</html>
diff --git a/workboard-frontend/workboard-semantic.css b/workboard-frontend/workboard-semantic.css
@@ -31,6 +31,11 @@
   width: 100%;
 }
 
+textarea
+{
+  min-height: 1.2em;
+}
+
 .overflow
 {
   color: #db2828 !important;

diff --git a/workboard-frontend/workboard-semantic.js b/workboard-frontend/workboard-semantic.js
@@ -24,29 +24,56 @@ var statuses = {
 
 var user = null;
 
-function tell(event)
-{
-  event.stopPropagation();
-  event.preventDefault();
-
-  var theTarget = $(event.target);
+var statusDropdownConfig = {
+  on: 'hover',
+  action: 'select',
+  onChange: function(value, text, choice) {
+    if (!choice)
+      return;
+
+    var statusClass = 'ui ' + statuses[value].icon + ' icon';
+
+    var theDropdown = choice.closest('.ui.task.dropdown');
+    theDropdown.children('i').removeClass().addClass(statusClass);
+
+    sendMessage(theDropdown, {
+        type  : 'task',
+        task  : choice.closest('.task.card').data('id'),
+        field : 'status',
+        value : value,
+        sender: user
+      });
+  }
+};
 
-  if (theTarget.data('remote') !== 'remote')
+function sendMessage(origin, message)
+{
+  if (origin.data('remote') !== 'remote')
   {
     $.post({
       url: '/api/',
-      data: JSON.stringify({
-        type  : "task",
-        task  : theTarget.closest('.task.card').data('id'),
-        field : theTarget.attr('name'),
-        value : theTarget.val(),
-        sender: user
-      }),
+      data: JSON.stringify(message),
       contentType: 'application/octet-stream'
     });
   }
 }
 
+function tell(event)
+{
+  event.stopPropagation();
+  event.preventDefault();
+
+  var theTarget = $(event.target);
+
+  sendMessage(theTarget, {
+    type  : "task",
+    task  : theTarget.closest('.task.card').data('id'),
+    field : theTarget.attr('name'),
+    value : theTarget.val(),
+    sender: user
+  });
+}
+
 function updateTime(event)
 {
   event.stopPropagation();
@@ -79,6 +106,8 @@ $(window).keydown(function(event)
     {
       event.stopPropagation();
       event.preventDefault();
+
+      createTask();
     }
 
     // Alt + [0-9]: toggle the corresponding activity.
@@ -133,11 +162,19 @@ function listenUpdates(lastSID)
 
 function createTask()
 {
-  $('.templates .task.card')
-    .clone(true)
-    .attr('data-id', Math.random().toString())
-    .appendTo('.ui.cards')
-    .transition('scale');
+  var theClone = $('.templates .task.card').clone();
+
+  theClone.find('.ui.task.dropdown')
+          .dropdown(statusDropdownConfig)
+          .data    ('remote'      , 'remote'     )
+          .dropdown('set selected', 'NOT_STARTED')
+          .data    ('remote'      , 'user'       );
+
+  theClone.find('textarea').autoHeight();
+
+  theClone.attr('data-id', Math.random().toString())
+          .appendTo('.ui.cards')
+          .transition('scale');
 }
 
 function removeTask(event)
@@ -147,44 +184,5 @@ function removeTask(event)
 
 $(document).ready(function()
 {
-  $('.ui.task.dropdown').dropdown({
-    on: 'hover',
-    action: 'select',
-    onChange: function(value, text, choice) {
-      if (!choice)
-        return;
-
-      var statusClass = 'ui ' + statuses[value].icon + ' icon';
-
-      /* Changes dropdown's *icon* to the selected one.
-       * This is necessary since Semantic UI would otherwise copy the selected
-       * status's *icon + text*, and that's undesirable.
-       */
-      var theDropdown = choice.closest('.ui.task.dropdown');
-      theDropdown.children('i').removeClass().addClass(statusClass);
-
-      if (theDropdown.data('remote') !== 'remote')
-      {
-        $.post({
-          url: '/api/',
-          data: JSON.stringify({
-            type  : 'task',
-            task  : choice.closest('.task.card').data('id'),
-            field : 'status',
-            value : value,
-            sender: user
-          }),
-          contentType: 'application/octet-stream'
-        });
-      }
-    }
-  });
-
-  $('.ui.task.dropdown')
-    .data    ('remote'      , 'remote'     )
-    .dropdown('set selected', 'NOT_STARTED')
-    .data    ('remote'      , 'user'       );
-
-  $('textarea').autoHeight();
   listenUpdates(0);
 });