247 lines
9.0 KiB
HTML
247 lines
9.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block header %}
|
|
<header id="negotiation-header">
|
|
<div class="inner">
|
|
<nav id="navigation">
|
|
<!--
|
|
<span id="home-button" class="nav-button">
|
|
<a class="home-button"><i class="ic ic-settings"></i>Settings</a>
|
|
</span> -->
|
|
<h1 class="post-title">Red Markets Negotiations: {{ negotiation.name }}</h1>
|
|
<!-- <span id="menu-button" class="nav-button">
|
|
<a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
|
|
</span> -->
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
{% endblock header %}
|
|
|
|
{% block content %}
|
|
<div id="negotiation" class="negotiation-wrapper">
|
|
<div class="negotiation-sidebar">{% include 'partials/negotiation-sidebar.html' %}</div>
|
|
<div class="negotiation-panel">{% include 'partials/negotiation-panel.html' %}</div>
|
|
</div>
|
|
<script src="/static/js/jquery.min.js"></script>
|
|
<script src="/static/js/socket.io.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
// const negotiation = new Negotiation("{{negotiation.name}}")
|
|
var socket = io();
|
|
var room = "{{negotiation.name}}";
|
|
|
|
socket.on('connect', function() {
|
|
console.log("Trying to join room " + room);
|
|
socket.emit('join negotiation', {"room": room}, function(e) {
|
|
update_from_data(e['negotiation']);
|
|
update_phase(e['phase']);
|
|
});
|
|
});
|
|
window.addEventListener('beforeunload', function(e) {
|
|
console.log("Trying to leave room " + room);
|
|
socket.emit('leave negotiation', {"room": room});
|
|
socket.disconnect();
|
|
return true;
|
|
});
|
|
socket.on('participants changed', (data) => {
|
|
console.log(data);
|
|
$("#negotiation .participants .count").html(data['participants'].length);
|
|
$("#negotiation .participant-list li").each(function() {
|
|
if (!data['participants'].includes($(this).attr('participant-id'))) {
|
|
console.log("Removing element for participant id " + $(this).attr('participant-id'));
|
|
console.log($(this));
|
|
$(this).remove();
|
|
}
|
|
});
|
|
var num_p;
|
|
var listed = $('#negotiation .participant-list li');
|
|
for (num_p = 0; num_p < data['participants'].length ; num_p++) {
|
|
var p = data['participants'][num_p];
|
|
console.log('Checking to see if ' + p + ' is in the participant list');
|
|
console.log($('#negotiation .participant-list li[participant-id="' + p + '"]'));
|
|
if ($('#negotiation .participant-list li[participant-id="' + p + '"]').length < 1) {
|
|
$("#negotiation .participant-list").append(
|
|
'<li participant-id="' + p + '">' + p + '</li>'
|
|
);
|
|
}
|
|
}
|
|
});
|
|
socket.on('negotiation updated', function(e) {
|
|
update_from_data(e);
|
|
});
|
|
socket.on('negotiation state changed', function(e) {
|
|
update_phase(e['phase'], e['transitioned_from']);
|
|
});
|
|
|
|
function update_from_data(e) {
|
|
console.log(e);
|
|
if ('taker_sway' in e) {
|
|
// Update taker way
|
|
var current_taker_sway = $('.swaytracker .taker-position .active').attr('id');
|
|
change_swayslot(current_taker_sway, 't' + e.taker_sway);
|
|
}
|
|
if ('market_sway' in e) {
|
|
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']);
|
|
}
|
|
if ('is_first_negotiation' in e) {
|
|
$('#is-first-negotiation').prop('checked', e['is_first_negotiation'] == true)
|
|
}
|
|
}
|
|
|
|
function update_phase(p, transition_from = null) {
|
|
console.log(p);
|
|
$('.phase-display-name').html(p['display_name']);
|
|
$('.phase-description').html(p['description']);
|
|
$('.phase-description-taker').html(p['description_taker']);
|
|
var was_disabled = $('#state-previous').attr('disabled');
|
|
var previous_button = $('#state-previous');
|
|
var next_button = $('#state-next');
|
|
previous_button.attr('disabled', p['previous_phase'] == null);
|
|
next_button.attr('disabled', p['next_phase'] == null);
|
|
if (previous_button.attr('disabled')) {
|
|
previous_button.attr('src', '/static/images/button-previous-disabled.png');
|
|
}
|
|
else {
|
|
previous_button.attr('src', '/static/images/button-previous.png');
|
|
}
|
|
if (next_button.attr('disabled')) {
|
|
next_button.attr('src', '/static/images/button-next-disabled.png');
|
|
}
|
|
else {
|
|
next_button.attr('src', '/static/images/button-next.png');
|
|
}
|
|
}
|
|
|
|
function phase_on_next() {
|
|
// Some client side validation when running in automatic should go here, before
|
|
// the signal is sent to the server.
|
|
console.log('next');
|
|
socket.emit('set next phase', {"room": room});
|
|
}
|
|
|
|
function phase_on_prev() {
|
|
console.log('previous');
|
|
socket.emit('set previous phase', {"room": room});
|
|
}
|
|
|
|
function swayslot_on_dragstart(event) {
|
|
var ev = event.originalEvent;
|
|
ev.dataTransfer.setData("text/plain", ev.target.id);
|
|
let img = new Image();
|
|
img.src = '/static/images/drag.png';
|
|
ev.dataTransfer.setDragImage(img, 0, 0);
|
|
ev.dataTransfer.dropEffect = "move";
|
|
}
|
|
function swayslot_on_dragover(event) {
|
|
event.preventDefault();
|
|
event.originalEvent.dataTransfer.dropEffect = "move";
|
|
}
|
|
function swayslot_on_drop(event) {
|
|
event.preventDefault();
|
|
var source = event.originalEvent.dataTransfer.getData('text/plain');
|
|
// Check to see if this is in the same track (id starts with same letter)
|
|
var this_id = $(this).attr('id');
|
|
if (this_id[0] == source[0] && this_id != source) {
|
|
var key = (this_id[0] == 't' ? 'taker_sway' : 'market_sway');
|
|
var value = this_id[1];
|
|
var data = {
|
|
"room": room,
|
|
};
|
|
data[key] = value;
|
|
socket.emit('update negotiation', data, function (confirmation) {
|
|
if (confirmation) {
|
|
change_swayslot(source, this_id);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
function change_swayslot(from, to) {
|
|
$("#" + 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'];
|
|
console.log($('#' + id));
|
|
var dom_obj = $('#' + id);
|
|
var value;
|
|
switch (dom_obj.attr('type')) {
|
|
case 'checkbox':
|
|
value = dom_obj.prop('checked');
|
|
break;
|
|
default:
|
|
value = dom_obj.val();
|
|
break;
|
|
}
|
|
// 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);
|
|
$('#' + id).siblings('.onoffswitch-label').attr('disabled', true);
|
|
}
|
|
}
|
|
|
|
function toggle_fieldset(e) {
|
|
console.log($(e.target));
|
|
var parent = $(e.target).parents().parents('.fieldset').first();
|
|
console.log(parent);
|
|
if (parent.hasClass('fieldset-open')) {
|
|
parent.removeClass('fieldset-open');
|
|
parent.addClass('fieldset-closed');
|
|
}
|
|
else {
|
|
parent.removeClass('fieldset-closed');
|
|
parent.addClass('fieldset-open');
|
|
}
|
|
}
|
|
// Drag/drog for the swaytracker
|
|
var inputChanges = {};
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
$('.swaytracker .active').on('dragstart', swayslot_on_dragstart);
|
|
$('.swaytracker .active').attr('draggable', true);
|
|
$('.swaytracker .market-position .slot').on('dragover', swayslot_on_dragover);
|
|
$('.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);
|
|
});
|
|
}
|
|
|
|
$('#state-next').on('click', phase_on_next);
|
|
$('#state-previous').on('click', phase_on_prev);
|
|
|
|
// Disable the manual negotiation toggle if it's already on.
|
|
$('#manual-negotiation[checked]').unbind('change').attr('disabled', true);
|
|
$('#manual-negotiation[checked]').siblings('.onoffswitch-label').attr('disabled', true);
|
|
|
|
// Add fieldset bindings
|
|
$('.fieldset .fieldset-button').on('click', function(e) {
|
|
toggle_fieldset(e);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock content %}
|