279 lines
8.5 KiB
JavaScript
Executable File
279 lines
8.5 KiB
JavaScript
Executable File
var clothesLineHeight = 50;
|
|
var clothesLinePos = {x: 0, y: 0, minHeight: 0, maxHeight: 0, lastBX: undefined, lastX: undefined, moving: Date.now() - 300, startMove: undefined };
|
|
var wardrobe = [];
|
|
var hangingClothes = 0;
|
|
function clotheslineHanger(clothes) {
|
|
|
|
if (hangingClothes == 0) {
|
|
hangingClothes = 1;
|
|
wardrobe = clothes;
|
|
var maxWidth = 140;
|
|
var totalWidth = maxWidth * clothes.length;
|
|
var layout = localStorage.getItem('layout');
|
|
var canvas = document.getElementById(layout);
|
|
ctx = canvas.getContext('2d');
|
|
ctx.strokeStyle = 'black';
|
|
ctx.lineWidth = 5;
|
|
ctx.beginPath();
|
|
|
|
var minHeight = 79;
|
|
var maxHeight = minHeight + (clothesLineHeight);
|
|
clothesLinePos['minHeight'] = minHeight;
|
|
clothesLinePos['maxHeight'] = maxHeight;
|
|
if (clothes.length > 0) {
|
|
ctx.clearRect(0,minHeight,canvas.width,clothesLineHeight);
|
|
ctx.moveTo(0,minHeight);
|
|
ctx.lineTo(canvas.width, minHeight);
|
|
ctx.moveTo(0,minHeight + clothesLineHeight);
|
|
ctx.lineTo(canvas.width,minHeight + clothesLineHeight);
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.font = "400 20px Times New Roman";
|
|
|
|
$.each(clothes, function(i,v) {
|
|
v['type'] = 'clothes';
|
|
var clothingDrive = [];
|
|
$.each(appPosition, function(ie,ve) {
|
|
if (v['app'] == ve[4]['app'] && v['type'] == 'clothes') {
|
|
clothingDrive.push(ie);
|
|
}
|
|
});
|
|
$.each(clothingDrive.reverse(), function(ie,ve) {
|
|
appPosition.splice(ve,1);
|
|
});
|
|
var startW = (i * maxWidth) + clothesLinePos['x'];
|
|
var endW = startW + maxWidth;
|
|
|
|
ctx.fillStyle = v.colour || 'yellow';
|
|
ctx.strokeRect(startW,minHeight,maxWidth,clothesLineHeight);
|
|
ctx.fillRect(startW,minHeight,maxWidth,clothesLineHeight);
|
|
ctx.fill();
|
|
ctx.fillStyle = 'black';
|
|
var textMeasure = ctx.measureText(v.formatted_name).width;
|
|
var textPos = ((maxWidth - textMeasure) / 2) + startW;
|
|
ctx.fillText(v.formatted_name, textPos , maxHeight - (clothesLineHeight / 3));
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
appPosition.push([startW , minHeight , endW, maxHeight, v]);
|
|
});
|
|
hangingClothes = 0;
|
|
}
|
|
}
|
|
|
|
|
|
$(document).on('touchmove', '.background', function(m) {
|
|
var w = $(this);
|
|
var id = $(this).attr('id');
|
|
clothesLinePos['moveTimeout'] = timestamp;
|
|
var x = m.originalEvent.clientX;
|
|
var y = m.originalEvent.clientY;
|
|
if (m.originalEvent.targetTouches) {
|
|
x = m.originalEvent.targetTouches[0].clientX;
|
|
y = m.originalEvent.targetTouches[0].clientY;
|
|
}
|
|
x = numeral(x - w.offset().left).value();
|
|
y = numeral(y - w.offset().top).value();
|
|
if ((y <= clothesLinePos['maxHeight'] && y >= clothesLinePos['minHeight']) && (clothesLinePos['startMove'] == undefined || clothesLinePos['startMove'] == 'clothesline')) {
|
|
if (clothesLinePos['lastX'] == undefined) {
|
|
clothesLinePos['lastX'] = x;
|
|
}
|
|
if (clothesLinePos['startMove'] == undefined) {
|
|
clothesLinePos['startMove'] = 'clothesline';
|
|
}
|
|
var mouseDiff = x - clothesLinePos['lastX'];
|
|
clothesLinePos['lastX'] = x;
|
|
clothesLinePos['x'] += mouseDiff;
|
|
clothesLinePos['y'] = y;
|
|
if (clothesLinePos['startMove'] == 'clothesline') {
|
|
clotheslineScroller(x,y,mouseDiff);
|
|
}
|
|
}
|
|
else if ((y >= clothesLinePos['maxHeight'] && id == 'timeline') && ( clothesLinePos['startMove'] == undefined || clothesLinePos['startMove'] == 'canvas')) {
|
|
clothesLinePos['moving'] = Date.now();
|
|
if (clothesLinePos['lastBX'] == undefined) {
|
|
clothesLinePos['lastBX'] = x;
|
|
}
|
|
var mouseDiff = (x - clothesLinePos['lastBX']);
|
|
clothesLinePos['lastBX'] = x;
|
|
if (clothesLinePos['startMove'] == undefined) {
|
|
clothesLinePos['startMove'] = 'canvas';
|
|
}
|
|
if (clothesLinePos['startMove'] == 'canvas') {
|
|
timelineScroller({ mousediff: mouseDiff });
|
|
}
|
|
}
|
|
|
|
});
|
|
$(document).on('mouseout touchend mouseup', '.background', function() {
|
|
if (clothesLinePos['lastBX']) {
|
|
// calculator();
|
|
}
|
|
clothesLinePos['lastX'] = undefined;
|
|
clothesLinePos['lastBX'] = undefined;
|
|
clothesLinePos['startMove'] = undefined;
|
|
});
|
|
|
|
$(document).on('mousewheel', '.background', function(e) {
|
|
clothesLinePos['moving'] = Date.now();
|
|
var w = $(this);
|
|
var id = $(this).attr('id');
|
|
var mvmt = numeral(e.originalEvent.wheelDelta).value();
|
|
|
|
var diff = -1 * (numeral(mvmt / 5).value());
|
|
var m = mouse_position();
|
|
var x = m.x;
|
|
var y = m.y;
|
|
|
|
if (y <= clothesLinePos['maxHeight'] && y >= clothesLinePos['minHeight']) {
|
|
if (clothesLinePos['startMove'] == undefined) {
|
|
clothesLinePos['startMove'] = 'clothesline';
|
|
}
|
|
if (clothesLinePos['startMove'] == 'clothesline') {
|
|
clotheslineScroller(x,y,diff);
|
|
}
|
|
}
|
|
else if (y >= clothesLinePos['maxHeight'] && id == 'timeline') {
|
|
if (clothesLinePos['startMove'] == undefined) {
|
|
clothesLinePos['startMove'] = 'canvas';
|
|
}
|
|
if (clothesLinePos['startMove'] == 'canvas') {
|
|
timelineScroller({ mousediff: diff });
|
|
}
|
|
}
|
|
clothesLinePos['startMove'] = undefined;
|
|
});
|
|
|
|
function clotheslineScroller(x,y,diff) {
|
|
if (y > clothesLinePos['minHeight'] && y < clothesLinePos['maxHeight']) {
|
|
clothesLinePos['x'] = clothesLinePos['x'] + diff;
|
|
clotheslineHanger(wardrobe);
|
|
}
|
|
}
|
|
|
|
function timelineScroller(data) {
|
|
var wp = 0;
|
|
var span = response.appts['__specs']['end'] - response.appts['__specs']['start'];
|
|
var ww = $(window).width();
|
|
if (data.mousediff) {
|
|
wp = data.mousediff / ww;
|
|
}
|
|
else if (data.diff) {
|
|
wp = (data.diff) / span;
|
|
}
|
|
|
|
var sdiff = span * wp;
|
|
var scope = localStorage.getItem('scope');
|
|
var period = response.appts['__specs']['period'];
|
|
response.appts['__specs']['end'] = response.appts['__specs']['end'] - sdiff;
|
|
response.appts['__specs']['start'] = response.appts['__specs']['start'] - sdiff;
|
|
response.appts['__specs']['timestamp'] = (numeral(response.appts['__specs']['timestamp']).value() - sdiff);
|
|
|
|
var ts = quality_inventory(numeral(response.appts['__specs']['timestamp']).value() );
|
|
if (!$('#time_machine').is(':focus') && data.mousediff) {
|
|
$('#time_machine').val(ts)
|
|
localStorage.setItem('time_machine', ts);
|
|
}
|
|
// timestamp = response.appts['__specs']['timestamp'];
|
|
$.each(response.appts, function(i,ve) {
|
|
|
|
if (!i.match('__')) {
|
|
$.each(ve['list'], function(ie,v) {
|
|
var point = v['timestamp'] - response.appts['__specs']['start'];
|
|
var total = response.appts['__specs']['timestamp'] - response.appts['__specs']['start'];
|
|
var percent = point / total;
|
|
v[scope + '_percent'] = percent;
|
|
if (v['duration']) {
|
|
point = v['timestamp'] - v['duration'] - response.appts['__specs']['start'];
|
|
percent = point / total;
|
|
v[scope + '_start_percent'] = percent;
|
|
if (v['type'] == 'start' && v['timestamp'] < response.appts['__specs']['timestamp']) {
|
|
var dur = (response['appts']['__specs']['timestamp'] - v['timestamp']) * -1;
|
|
if (v['duration'] > dur) { v['duration'] = dur; }
|
|
}
|
|
}
|
|
ve['placement_number'] = undefined;
|
|
});
|
|
}
|
|
});
|
|
graphicalize(response);
|
|
|
|
}
|
|
|
|
$(document).on('click', '.clothesline', function() {
|
|
var timestamp = Date.now();
|
|
var app = $(this).attr('app');
|
|
$.ajax({
|
|
url: '/manager/clothesline',
|
|
type: 'GET',
|
|
data: { app: app, timestamp: timestamp },
|
|
success: function(response) {
|
|
$('#alert').html(response.html).show();
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('change', '.clothes', function() {
|
|
var timestamp = Date.now();
|
|
var setting = $(this).attr('setting');
|
|
var value = $(this).val();
|
|
var app = $(this).attr('app');
|
|
|
|
var data = { timestamp: timestamp, setting: setting, value: value, app: app };
|
|
if ($(this).is('select[multiple]')) {
|
|
data['value'] = JSON.stringify(value);
|
|
data['is_json'] = 'yes';
|
|
}
|
|
$.ajax({
|
|
url: '/manager/clothesline',
|
|
type: 'POST',
|
|
data: data,
|
|
success: function(response) {
|
|
console.log(response);
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.clothes_picker', function() {
|
|
var shirt = $(this);
|
|
var app = shirt.attr('app');
|
|
var td = shirt.attr('td');
|
|
if (shirt.attr('re') == 'all') {
|
|
if (shirt.attr('wearing') == 'on') {
|
|
$('.clothes_picker[app="' + app + '"][td="' + td + '"]').attr('wearing', 'off');
|
|
}
|
|
else {
|
|
$('.clothes_picker[app="' + app + '"][td="' + td + '"]').attr('wearing', 'on');
|
|
}
|
|
}
|
|
else {
|
|
if (shirt.attr('wearing') == 'on') {
|
|
shirt.attr('wearing', 'off');
|
|
}
|
|
else {
|
|
shirt.attr('wearing', 'on');
|
|
}
|
|
}
|
|
var time_plinko = {};
|
|
$('.clothes_picker[wearing="on"]').each(function(i,v) {
|
|
var td = $(v).attr('td');
|
|
var re = $(v).attr('re');
|
|
|
|
if (!time_plinko[td]) { time_plinko[td] = []; }
|
|
time_plinko[td].push(re);
|
|
});
|
|
|
|
var setting = 'time_plinko';
|
|
var value = JSON.stringify(time_plinko);
|
|
console.log(value);
|
|
console.log(time_plinko);
|
|
$.ajax({
|
|
url: '/manager/clothesline',
|
|
type: 'POST',
|
|
data: { setting: setting, value: value, app: app, timestamp: timestamp, is_json: 'yes' },
|
|
success: function(response) {
|
|
console.log(response);
|
|
}
|
|
});
|
|
}); |