Add more negotiation fields to the UI

negotiation.py

@@ -136,6 +136,9 @@ def handle_update_negotiation(json):
         app.logger.warning('Refusing update of {} from non-owner {}'.format(json['room'], uid))
         return False
     del json['room']
+    # If a negotiation was set to manual, it may not be set back to automatic.
+    if nego.manual_negotiation and 'manual_negotiation' in json:
+        del json['manual_negotiation']
     nego.set(**json)
     pony.orm.commit()
     flask_socketio.emit('negotiation updated', {**json}, room = nego.name)
@@ -245,7 +248,7 @@ if __name__ == '__main__':
         name = pony.orm.PrimaryKey(str)
         owner = pony.orm.Required(User)
         client_name = pony.orm.Optional(str)
-        negotiatior_name = pony.orm.Optional(str)
+        negotiator_name = pony.orm.Optional(str)
         taker_crew_name = pony.orm.Optional(str)
         # Manual negotation
         manual_negotiation = pony.orm.Optional(bool)

templates/negotiation.html

@@ -78,6 +78,15 @@
           var current_market_sway = $('.swaytracker .market-position .active').attr('id');
           change_swayslot(current_market_sway, 'm' + e.market_sway);
       }
+      if ('client_name' in e) {
+          $('.client-name').html(e['client_name']);
+      }
+      if ('taker_crew_name' in e) {
+          $('.taker-crew-name').html(e['taker_crew_name']);
+      }
+      if ('negotiator_name' in e) {
+          $('.negotiator-name').html(e['negotiator_name']);
+      }
   }
   function swayslot_on_dragstart(event) {
           var ev = event.originalEvent;
@@ -114,7 +123,27 @@
       $("#" + from).removeClass('active').unbind('dragstart').attr('draggable', false);
       $('#' + to).addClass('active').on('dragstart', swayslot_on_dragstart).attr('draggable', true);
   }
+
+  function update_negotiation_settings(e) {
+      var d = {
+          "room": room,
+      };
+      var id = e.target['id'];
+      var value = $("#" + id).val();
+      // Regex is needed, since replace only functions on the first
+      // occurrence otherwise.
+      var key = id.replace(/-/g, '_');
+      console.log("Key: " + key);
+      console.log("Value: " + value);
+      d[key] = value;
+      socket.emit('update negotiation', d);
+      if (id == 'manual-negotiation') {
+          $('#' + id).unbind('change').attr('disabled', true);
+      }
+  }
+
   // Drag/drog for the swaytracker
+  var inputChanges = {};
   window.addEventListener('DOMContentLoaded', () => {
       $('.swaytracker .active').on('dragstart', swayslot_on_dragstart);
       $('.swaytracker .active').attr('draggable', true);
@@ -122,6 +151,19 @@
       $('.swaytracker .taker-position .slot').on('dragover', swayslot_on_dragover);
       $('.swaytracker .market-position .slot').on('drop', swayslot_on_drop);
       $('.swaytracker .taker-position .slot').on('drop', swayslot_on_drop);
+
+      if ($('.market-settings').length > 0) {
+          // Bind update hooks
+          // Text-fields update when the user hit 'enter'.
+          $('#market-settings input').change(function(e) {
+              console.log(e);
+              update_negotiation_settings(e);
+          });
+      }
+
+      // Disable the manual negotation toggle if it's already on.
+      $('#manual-negotiation[checked]').unbind('change').attr('disabled', true);
+      
   });
 </script>
 {% endblock content %}

templates/partials/negotiation-panel.html

@@ -1,3 +1,9 @@
+<h3 class="client-name">{{ negotiation.client_name }}</h3>
 <div id="swaytracker">
   {% include 'partials/swaytracker.html' %}
 </div>
+<h3>
+  <span class="taker-crew-name">{{ negotiation.taker_crew_name }}</span>
+  <span>represented by</span>
+  <span class="negotiator-name">{{ negotiation.negotiator_name }}</span>
+</h3>

templates/partials/negotiation-sidebar.html

@@ -5,6 +5,47 @@
   {% endif %}
 </div>
 
+{% if user == room_owner.uid %}
+<div class="market-settings">
+  <form id="market-settings">
+    <span>Manual Negotiation</span>
+    <div class="onoffswitch">
+      <input id="manual-negotiation" type="checkbox" class="onoffswitch-checkbox" {% if negotiation.manual_negotiation %}checked{% endif %}>
+      <label for="manual-negotiation" class="onoffswitch-label">
+        <span class="onoffswitch-inner"></span>
+        <span class="onoffswitch-switch"></span>
+      </label>
+    </div>
+    <br>
+    <label for="is-first-negotiation">First Negotiation?</label>
+    <input id="is-first-negotiation" type="checkbox">
+    <br>
+    <label for="client-name">Client Name</label>
+    <input id="client-name" type="text" placeholder="Enter the client's name">
+    <br>
+    <label for="negotiator-name">Negotiator Name</label>
+    <input id="negotiator-name" type="text" placeholder="Enter the negotiator's name">
+    <br>
+    <label for="taker-crew-name">Crew Name</label>
+    <input id="taker-crew-name" type="text" placeholder="Enter the taker's crew's name">
+    <br>
+    <label for="takers">Numer of takers in the crew</label>
+    <input id="takers" type="text" pattern="[0-9]+" size="1">
+    <br>
+    <label for="first-impression-black">First Impression (Black die value)</label>
+    <input id="first-impression-black" type="text" pattern="[0-9]+" size="1">
+    <br>
+    <label for="first-impression-state">Level of success on the first impression</label>
+    <select id="first-impression-state" type="select" name="first-impression-state">
+      <option value="critfail">Critical Failure</option>
+      <option value="fail">Failure</option>
+      <option value="success">Success</option>
+      <option value="critsuccess">Critical Success</option>
+    </select>
+  </form>
+</div>
+{% endif %}
+
 <div class="participants">
   <h4>Participants</h4>
   <p><span class="count">{{ participant_count }}</span>&nbsp;<span> takers in this room</span></p>