Pārlūkot izejas kodu

Fix Programme display

master
tr4ck3ur des JM2L pirms 9 gadiem
vecāks
revīzija
47c6b6a7c0
2 mainītis faili ar 246 papildinājumiem un 111 dzēšanām
  1. +235
    -104
      jm2l/static/js/programme.js
  2. +11
    -7
      jm2l/templates/Public/Programme.mako

+ 235
- 104
jm2l/static/js/programme.js Parādīt failu

@@ -1,111 +1,242 @@
var scheds = {};

function example() {
var taskStatus = {'Stand':'Stand',
'Table ronde':'Table-ronde',
'Atelier':'Atelier',
'Concert':'Concert',
'Conference':'Conference',
'Repas':'Repas'}

d3.json("le-prog-json", function(error, JsonContent) {
if (error)
return console.warn(error);
$.each( JsonContent,
function( EventType, ListEvType ) {
$.each( ListEvType,
function( Day, ListEvent ) {
var placeNames = [];
for ( var i = 0; i < ListEvent.length; i++) {
placeNames.push(ListEvent[i]["placeName"]);
// convert json text to js Date
ListEvent[i]["startDate"] = new Date(ListEvent[i]["startDate"]);
ListEvent[i]["endDate"] = new Date(ListEvent[i]["endDate"]);
}
//placeNames.push("unk")
scheds[EventType+"_"+Day] = new d3.sched("SVG_"+Day)
.taskTypes(placeNames)
.taskStatus(taskStatus)
.tickFormat("%H:%M");
//scheds[EventType+"_"+Day].timeDomainMode("fit");
//scheds[EventType+"_"+Day].margin(margin);
scheds[EventType+"_"+Day](ListEvent);
//scheds[EventType+"_"+Day].zoomed();
scheds[EventType+"_"+Day].redraw("SVG_"+Day, ListEvent)
});
});
});

var taskStatus = {'Stand':'Stand',
'Table ronde':'Table-ronde',
'Atelier':'Atelier',
'Concert':'Concert',
'Conference':'Conference',
'Repas':'Repas'};
var tickFormat = "%H:%M";
var margin = {
top : 15,
right : 0,
bottom : 0,
left : 50
};
var height = 500;
var width = 730;
var Keys = Array();
var Salles = Array();
var Areas = Array();
var Tasks = Array();


d3.json("le-prog-json",
function(error, json) {
if (error) return console.warn(error);
var Keys = Object.keys(json["all"])
// Build set of data in memory
for (var k = 0; k < Keys.length; k++) {
Salles[Keys[k]] = Array();
Areas[Keys[k]] = Array();
Tasks[Keys[k]] = json["all"][Keys[k]]
// Fix Json to make date objects
Tasks[Keys[k]].forEach(function(d) {
d.startDate = new Date(d.startDate);
d.endDate = new Date(d.endDate);
})

// Build the list of Salles and Areas
Tasks[Keys[k]].forEach(function(d) {
Salles[Keys[k]].push( d.placeName );
Areas[Keys[k]].push( d.status );
} )
Salles[Keys[k]] = d3.set(Salles[Keys[k]]).values();
Areas[Keys[k]] = d3.set(Areas[Keys[k]]).values();
// Create Controls to Handle user selection
Areas[Keys[k]].forEach(function(TypeArea) {
d3.select("#Schedule_SVG_"+Keys[k])
.append("input")
.attr("type", "checkbox")
.attr("name", "OptTimetable-"+Keys[k])
.attr("id", TypeArea+"-"+Keys[k])
.attr("area", TypeArea)
.style("float", "left")
.style("margin-left", "5px")
.property("checked",true);
d3.select("#Schedule_SVG_"+Keys[k])
.append("label")
.attr("for", TypeArea+"-"+Keys[k])
.style("float", "left")
.style("margin-left", "5px")
.text(TypeArea);
});
// Create a dedicated SVG for it
svg = d3.select("#Schedule_SVG_"+Keys[k])
.append("svg")
.attr("id", "TimeTable-"+Keys[k])
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
//.attr("viewBox", "0 0 " + width + " " + height )
//.attr("preserveAspectRatio", "xMidYMid");

svg.append("g")
.attr("class", "xAxis axis");
svg.append("g")
.attr("class", "yAxis axis");
var chart = svg.append("g")
.attr("class", "timetable");

HandleEvents(Keys[k])
displayit(json["all"][Keys[k]], Salles[Keys[k]], Keys[k]);
}
});

var keyFunction = function(d) {
return d.startDate + d.placeName + d.endDate;
};

// Query Programme
example();

function changeTimeDomain(timeDomainString) {
this.timeDomainString = timeDomainString;
switch (timeDomainString) {
case "1hr":
format = "%H:%M:%S";
sched.timeDomain([ d3.time.hour.offset(getEndDate(), -1), getEndDate() ]);
break;
case "3hr":
format = "%H:%M";
sched.timeDomain([ d3.time.hour.offset(getEndDate(), -3), getEndDate() ]);
break;

case "6hr":
format = "%H:%M";
sched.timeDomain([ d3.time.hour.offset(getEndDate(), -6), getEndDate() ]);
break;

case "1day":
format = "%H:%M";
sched.timeDomain([ d3.time.day.offset(getEndDate(), -1), getEndDate() ]);
break;

case "1week":
format = "%a %H:%M";
sched.timeDomain([ d3.time.day.offset(getEndDate(), -7), getEndDate() ]);
break;
default:
format = "%H:%M"

}
sched.tickFormat(format);
sched.redraw(tasks);
}

function getEndDate() {
var lastEndDate = Date.now();
if (tasks.length > 0) {
lastEndDate = tasks[tasks.length - 1].endDate;
}

return lastEndDate;
function HandleEvents(Ctrl) {
d3.selectAll("input[name=OptTimetable-"+Ctrl+"]")
.data(Areas[Ctrl])
.on("change", function(TypeData) {
ArrayChoice = Array()
checked = d3.selectAll("input[name=OptTimetable-"+Ctrl+"]")[0]
.forEach( function(v)
{
if (d3.select(v).node().checked)
ArrayChoice.push(v.attributes['area'].value)
}
)
area_select = Array()
selection = Tasks[Ctrl].filter(function(v) {
return ArrayChoice.indexOf(v.status)>=0;
});
if (selection.length) {
selection.forEach(function(d)
{ area_select.push( d.placeName ); }
);
area_select = d3.set(area_select).values();
displayit(selection, area_select, Ctrl);
d3.select("#TimeTable-"+Ctrl)[0][0].style.opacity = 1;
} else {
d3.select("#TimeTable-"+Ctrl)[0][0].style.opacity = 0;
}
});
}

function addTask() {

var lastEndDate = getEndDate();
var taskStatusKeys = Object.keys(taskStatus);
var taskStatusName = taskStatusKeys[Math.floor(Math.random() * taskStatusKeys.length)];
var taskName = taskNames[Math.floor(Math.random() * taskNames.length)];

tasks.push({
"startDate" : d3.time.hour.offset(lastEndDate, Math.ceil(1 * Math.random())),
"endDate" : d3.time.hour.offset(lastEndDate, (Math.ceil(Math.random() * 3)) + 1),
"taskName" : taskName,
"status" : taskStatusName
});

changeTimeDomain(timeDomainString);
function displayit(Set_of_Task, Set_of_Area, key) {
// Try to compute time range
Set_of_Task.sort(function(a, b) {
return a.endDate - b.endDate;
});
timeDomainEnd = Set_of_Task[Set_of_Task.length - 1].endDate;
Set_of_Task.sort(function(a, b) {
return a.startDate - b.startDate;
});
timeDomainStart = Set_of_Task[0].startDate;

// Prepare scales
xScale = d3.scale.ordinal()
.domain(Set_of_Area)
.rangeRoundBands([ 0, width ], .1);
yScale = d3.time.scale()
.domain([ timeDomainStart, timeDomainEnd ])
.range([ 0, height - margin.top - margin.bottom ])
.clamp(true);

xAxis = d3.svg.axis()
.scale(xScale)
.orient("top")
.tickSize(1);

yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(d3.time.format(tickFormat))
.tickSubdivide(true)
.tickSize(8)
.tickPadding(8);

var svg = d3.select("#TimeTable-"+key);
var chart = svg.select(".timetable")

var content = chart.selectAll("foreignObject")
.data(Set_of_Task, keyFunction);

content.enter()
.insert("foreignObject",":first-child")
.append("xhtml:div")
.html(function(d) {
return '<div style="padding:5px;height:100%"><a href="/event/'+ d.uid +
'">' + d.desc + '</a></div>'
})
.transition()
.duration(750);
content.transition()
.duration(750)
.attr("x", function(d){
return xScale(d.placeName || "unk");
})
.attr("y", function(d){
return yScale( d.startDate );
})
.attr("width", function(d) {
return xScale.rangeBand();
})
.attr("height", function(d) {
return (yScale( d.endDate ) - yScale( d.startDate ));
});

content.exit()
.transition()
.duration(300)
.style("opacity", 1e-6)
.remove();

var rect = chart.selectAll("rect")
.data(Set_of_Task, keyFunction);
rect.enter()
.insert("rect",":first-child")
.attr("rx", 5)
.attr("ry", 5)
.attr("filter", "url(/img/shadow.svg#dropshadow)")
//.attr("style", "fill:url(/img/shadow.svg#BoxGradient)")
.attr("class", function(d){
if(taskStatus[d.status] == null)
{ return "bar";}
return taskStatus[d.status];
})
.transition()
.duration(750)


rect.transition()
.duration(750)
.attr("x", function(d){
return xScale(d.placeName || "unk");
})
.attr("y", function(d){
return yScale( d.startDate )+1;
})
.attr("width", function(d) {
return xScale.rangeBand();
})
.attr("height", function(d) {
return (yScale( d.endDate ) - yScale( d.startDate )-2);
});
rect.exit()
.transition()
.duration(300)
.style("opacity", 1e-6)
.remove();

svg.select(".yAxis")
.attr("transform", "translate("+ margin.left +","+ margin.top +")")
.transition()
.call(yAxis);
sched.redraw(tasks);
};
svg.select(".xAxis")
.attr("transform", "translate("+ margin.left +","+ margin.top +")")
.transition()
.call(xAxis);

function removeTask() {
tasks.pop();
changeTimeDomain(timeDomainString);
sched.redraw(tasks);
};
chart.attr("transform", "translate("+ margin.left +","+ margin.top +")");
}

+ 11
- 7
jm2l/templates/Public/Programme.mako Parādīt failu

@@ -14,18 +14,22 @@ TabDisplay = [
height: 65px;
}
.Conference {
fill:#EEE;
stroke: #ccc;
fill:#f9fde8;
stroke: #a2bc13;
}
.Concert {
fill:#2EE;
stroke: #ccc;
}
.Atelier {
fill: #ddd;
stroke: #ccc;
fill: #faebeb;
stroke: #dc7070;
}
.Table-ronde {
fill: #fff4e5;
stroke: #ff9912;
}
.txtsched {
.Repas {
fill:#2EE;
stroke: #ccc;
}
@@ -35,7 +39,7 @@ svg {
}

rect {
fill: #ddd;
stroke-width: 0px;
}

.axis path,
@@ -147,6 +151,6 @@ if Counter==0:
##</div>
<br/><br/>
<script type="text/javascript" src="/vendor/d3js/d3.v3.min.js"></script>
<script type="text/javascript" src="/js/Schedule.js"></script>
##<script type="text/javascript" src="/js/Schedule.js"></script>
<script type="text/javascript" src="/js/programme.js"></script>
##<script type="text/javascript" src="/js/sched.js"></script>

Notiek ielāde…
Atcelt
Saglabāt