From 76d1de512a58f023ae348ae8500100490fba9915 Mon Sep 17 00:00:00 2001 From: LV-426 Date: Thu, 13 Nov 2014 17:41:57 +0200 Subject: rename scripts/ -> src/ --- src/view/edge_info.js | 36 ++++++++++ src/view/helpers.js | 78 +++++++++++++++++++++ src/view/internal.js | 14 ++++ src/view/node_info.js | 63 +++++++++++++++++ src/view/tab.js | 57 ++++++++++++++++ src/view/timeline.js | 183 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/view/view.js | 12 ++++ 7 files changed, 443 insertions(+) create mode 100644 src/view/edge_info.js create mode 100644 src/view/helpers.js create mode 100644 src/view/internal.js create mode 100644 src/view/node_info.js create mode 100644 src/view/tab.js create mode 100644 src/view/timeline.js create mode 100644 src/view/view.js (limited to 'src/view') diff --git a/src/view/edge_info.js b/src/view/edge_info.js new file mode 100644 index 00000000..9652839c --- /dev/null +++ b/src/view/edge_info.js @@ -0,0 +1,36 @@ + +define(['view/internal'], +function(internal) { + +var delete_button = internal.edit_tab.get('edge', '#deleteedge'), + delete_callback = undefined; + +delete_button.on('click', function() { + if (delete_callback) { + delete_callback(); + } +}); + +function show(link) +{ + internal.edit_tab.show('edge'); + internal.edit_tab.get('edge', '#edgetitle').html(link.name); +} + +function hide() +{ + internal.edit_tab.hide(); +} + +function on_delete(f) +{ + delete_callback = f; +} + +return { + show: show, + hide: hide, + on_delete: on_delete, +}; +}); +"use strict" diff --git a/src/view/helpers.js b/src/view/helpers.js new file mode 100644 index 00000000..be0e289e --- /dev/null +++ b/src/view/helpers.js @@ -0,0 +1,78 @@ +"use strict" + +define(function() { +function customColor(type) { + var color; + switch (type) { + case "person": + color = '#FCB924'; + break; + case "project": + color = '#009DDC'; + break; + case "skill": + color = '#62BB47'; + break; + case "deliverable": + color = '#202020'; + break; + case "objective": + color = '#933E99'; + break; + case "empty": + color = "#080808"; + break; + case "chainlink": + color = "#fff"; + break; + case "bubble": + color = "rgba(0,0,0,0.2)"; + break; + default: + console.log('bug: unknown type ' + type); + color = '#080808'; + break; + } + return color; +} + +function customSize(type) { + var size; + switch (type) { + case "person": + size = 12; + break; + case "project": + size = 12; + break; + case "skill": + size = 12; + break; + case "deliverable": + size = 12; + break; + case "objective": + size = 12; + break; + case "empty": + size = 9; + break; + case "chainlink": + size = 8; + break; + case "bubble": + size = 180; + break; + default: + size = 9; + break; + } + return size; +} + + +return { + customSize: customSize, + customColor: customColor, +}; +}); diff --git a/src/view/internal.js b/src/view/internal.js new file mode 100644 index 00000000..bc18bd75 --- /dev/null +++ b/src/view/internal.js @@ -0,0 +1,14 @@ +define(['view/tab'], +function(tab) { + +var EDGE_INFO_SELECTOR = '.edge_info', + NODE_INFO_SELECTOR = '.info', + edit_tab = new tab.Tab({edge: EDGE_INFO_SELECTOR, node: NODE_INFO_SELECTOR}); + +return { + EDGE_INFO_SELECTOR: EDGE_INFO_SELECTOR, + NODE_INFO_SELECTOR: NODE_INFO_SELECTOR, + edit_tab: edit_tab, +}; + +}); diff --git a/src/view/node_info.js b/src/view/node_info.js new file mode 100644 index 00000000..d455b366 --- /dev/null +++ b/src/view/node_info.js @@ -0,0 +1,63 @@ +define(['jquery', 'view/helpers', 'view/internal'], +function($, view_helpers, internal) { + +function show(d) { + internal.edit_tab.show('node'); + + if (d.type === "deliverable") { + $('.info').html('Name: ' + d.id + '




'); + } else if(d.type=== "chainlink"){ + $('.info').html('Name: ' + d.id + '
'); + }else{ + $('.info').html('Name: ' + d.id + '


'); + } + + $('.info').css("border-color", view_helpers.customColor(d.type)); + + $("#editenddate").datepicker({ + inline: true, + showOtherMonths: true, + dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + }); + + $("#editstartdate").datepicker({ + inline: true, + showOtherMonths: true, + dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + }); + + $('#editdescription').val(d.type); + + $('#edittype').val(d.type); + + $('#editurl').val(d.url); + + if (d.type === "deliverable") { + $('#editstartdate').val(d.start); + $('#editenddate').val(d.end); + } +} + +function hide() +{ + internal.edit_tab.hide(); +} + +function on_submit(f) +{ + internal.edit_tab.get('node', "#editbox").submit(f); +} + +function on_delete(f) +{ + internal.edit_tab.get('node', "#deletenode").click(f); +} + +return { + show: show, + hide: hide, + on_submit: on_submit, + on_delete: on_delete, +}; + +}); diff --git a/src/view/tab.js b/src/view/tab.js new file mode 100644 index 00000000..97ba1351 --- /dev/null +++ b/src/view/tab.js @@ -0,0 +1,57 @@ +"use strict" + +define(['jquery'], +function($) { + +function Tab(dict) { + var k, + selector = {}, + name = []; + + for (k in dict) { + if (dict.hasOwnProperty(k) == false) { + continue; + } + selector[k] = dict[k]; + name.push(k); + } + this._selector = selector; + this._name = name; +} + +Tab.prototype.show = function(shown_name) { + var i, + name, + element; + + for (i = 0 ; i < this._name.length ; ++i) { + name = this._name[i]; + element = $(this._selector[name]); + if (name === shown_name) { + element.fadeIn(300); + } else { + element.hide(); + } + } +} + +Tab.prototype.hide = function() { + var i; + + for (i = 0 ; i < this._name.length ; ++i) { + $(this._selector[this._name[i]]).fadeOut(300); + } +} + +Tab.prototype.get = function(name, sel) { + // selector concatenation + var e = $(this._selector[name] + ' ' + sel); + + return e; +} + +return { + Tab: Tab +}; + +}); diff --git a/src/view/timeline.js b/src/view/timeline.js new file mode 100644 index 00000000..b7443551 --- /dev/null +++ b/src/view/timeline.js @@ -0,0 +1,183 @@ +"use strict" + +function checkSwitch(checkswitch) { + + if (checkswitch.checked) { + vis.selectAll(".gantt").remove(); + $('.missingdates').fadeOut(300); + scrollValue = $('body').scrollLeft(); + + $('body').scrollLeft(0); + graphstate = "GRAPH"; + graph.update(); + + $('.status').fadeOut(600); + + //boxedin=false; + + } else { + ganttTimer=0; + $('.missingdates').fadeIn(300); + + graph.recenterZoom(); + + $('body').scrollLeft(scrollValue); + + graphstate = "GANTT"; + + graph.update(); + + $('.status').fadeIn(600); + + + initAxis(); + + //boxedin=true; + } + +} + +///For some reason JQuery's $('body').scroll never worked, so I found something else. +$('body').bind('DOMMouseScroll', function(e){ + if(graphstate==="GANTT"){ + if(e.originalEvent.detail !== 0) { + $('.overlay').hide(); + }else{ + $('.overlay').show(); + } + }else{ + return false; + } + }); + + //IE, Opera, Safari + $('body').bind('mousewheel', function(e){ + if(graphstate==="GANTT"){ + if(e.originalEvent.wheelDelta !== 0) { + $('.overlay').hide(); + }else{ + $('.overlay').show(); + var left = $('body').offset().left; + $('.overlay').scrollLeft(left); + } + }else{ + return false; + } + }); + + + + +function initAxis() { + var bar_height = 20; + var row_height = bar_height + 10; + var vertical_padding = 150 + var bar_start_offset = 40; + var h = 15 * row_height + vertical_padding; + + + var min = deliverables[0].startdate; + var max = deliverables[0].enddate; + + for (var i = 0; i < deliverables.length; i++) { + var deliv = deliverables[i]; + if (min > deliv.startdate) min = deliv.startdate; + if (end < deliv.enddate) end = deliv.enddate; + } + min = new Date(min); ///with min + max = new Date(max); + console.log("min "+min+" max "+max); + + ///update interval + var timeDiff = Math.abs(max.getTime() - min.getTime()); + var diffDays = timeDiff / (1000 * 3600 * 24); + var w = Math.round(diffDays * 15 - 100); + graphinterval = w / diffDays; + + + + var svg=vis; + vis.attr("width",w); + + var paddingLeft = 150; + var paddingTop = 120; + + var xScale = d3.time.scale() + .domain([min, max]).nice() + .range([paddingLeft, w]); + + var xAxis = d3.svg.axis() + .scale(xScale) + .orient("bottom"); + + // Lines + var line = svg.append("g") + .selectAll("line") + .data(xScale.ticks(40)) + .enter().append("line") + .attr("x1", xScale) + .attr("x2", xScale) + .attr("y1", paddingTop + 30) + .attr("y2", h - 50) + .attr("class", "gantt") + .style("stroke", "#ccc"); + + var y = function (i) { + return i * row_height + paddingTop + bar_start_offset; + } + + var labelY = function (i) { + return i * row_height + paddingTop + bar_start_offset + 13; + } + + // Company bars + var bar = svg.selectAll("rect") + .data(function (d) { + return Math.random() * 5; + }); + + bar.enter().append("rect") + .attr("y", -100) + .attr("x", -1000) + .attr("width", 100) + .attr("height", bar_height) + .attr("class", "company-bar gantt") + .on("mouseover", function (d) { + d3.select(this).style("fill", "#F5AF00"); + getCompanyData(String(d.uid)) + }) + .on("mouseout", function () { + d3.select(this).style("fill", "#fc0"); + }); + + + + var label = svg.selectAll("text") + .data(deliverables, function (key) { + return key.id + });; + + label.enter().append("text") + .attr("class", "bar-label gantt") + // .attr("text-anchor","end") + .attr("x", paddingLeft - 10) + .attr("y", function (d, i) { + return labelY(i); + }) + .text(function (d) { + }); + + + + // Bottom Axis + var btmAxis = svg.append("g") + .attr("transform", "translate(0," + (h - 25) + ")") + .attr("class", "axis gantt") + .call(xAxis); + + // Top Axis + var topAxis = svg.append("g") + .attr("transform", "translate(0," + paddingTop + ")") + .attr("class", "axis gantt") + .call(xAxis); +} diff --git a/src/view/view.js b/src/view/view.js new file mode 100644 index 00000000..95bfc09b --- /dev/null +++ b/src/view/view.js @@ -0,0 +1,12 @@ +"use strict" + +define(['view/node_info', 'view/edge_info', 'view/internal'], +function(view_node_info, view_edge_info, view_internal) { +return { + 'node_info': view_node_info, + 'edge_info': view_edge_info, + 'hide': function() { + view_internal.edit_tab.hide(); + }, +}; +}); -- cgit v1.3.1