diff --git a/index.html b/index.html index 5a094f853bc03efca919bcec2559a1ecfd6995b6..a25dc2cf8c97c9481626489a471e64e62364b1ca 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@ <script type="text/javascript" src="js/authoring/models/xmlParser.js"></script> <script type="text/javascript" src="js/authoring/models/authorSystemContentModel.js"></script> <script type="text/javascript" src="js/authoring/models/contextInfoModel.js"></script> + <script type="text/javascript" src="js/authoring/models/parameterModel.js"></script> <script type="text/javascript" src="js/authoring/models/contextInfoListModel.js"></script> <script type="text/javascript" src="js/authoring/models/scenarioModel.js"></script> <script type="text/javascript" src="js/authoring/models/unitModel.js"></script> diff --git a/js/authoring/controllers/authorSystemController.js b/js/authoring/controllers/authorSystemController.js index 94e06b228af54bb6163bbd7ae9f5e733529b28f4..9ae98dde82b26a37f7ff09b67726e828ca1130c3 100644 --- a/js/authoring/controllers/authorSystemController.js +++ b/js/authoring/controllers/authorSystemController.js @@ -133,11 +133,7 @@ function loadScenario(data) { // load units from scenario var unitsList = data.getUnits(); for (var j in unitsList) { - var unit = loadUnit(unitsList[j], (j+1).toString()); - - // set event listeners - // TODO: activateFunctionalities expects a DOM element as parameter! - activateFunctionalities(unit); + loadUnit(unitsList[j], (j+1).toString()); } // set connections diff --git a/js/authoring/controllers/canvasController.js b/js/authoring/controllers/canvasController.js index eba2ef644b5b5612e1181d3bb8ae38eb2b4e1816..fe59c18209bc6068d1a8c4d5cf89f4e6437e61e5 100644 --- a/js/authoring/controllers/canvasController.js +++ b/js/authoring/controllers/canvasController.js @@ -2,7 +2,10 @@ * Created by Helena on 04.09.2015. */ +var currentConnectionID; + function initPlumbCanvas() { + inst = jsPlumb.getInstance({ Endpoint: ["Dot", {radius: 2}], HoverPaintStyle: {strokeStyle: "#1e8151", lineWidth: 2 }, @@ -30,6 +33,7 @@ function initPlumbCanvas() { return !(con.connection.source.parentElement.id === con.targetId); }); + // triggered if a connection was drawn between to units inst.bind("connection", function (con) { @@ -43,9 +47,9 @@ function initPlumbCanvas() { if (typeof thisScenario !== "undefined") { // add connection in current scenario's JSON structure thisScenario.addConnection(new Connection( + con.connection.id, con.source.parentElement.id, con.targetId, - con.connection.id, "PRE", "Voraussetzung (PRE)")); @@ -81,64 +85,63 @@ function initPlumbCanvas() { } }); - var current_labelConnection; + // triggered if connection or label is clicked // c = connection element // e = event inst.bind("click", function (c, e) { var label = c.getOverlay("label"); + // update current label + currentConnectionID = label.canvas.id; - // if label was clicked show tab information --> test is obsolete since jsPlumb hands in parameter c : Connection - if (label.id == "label") { - - // get name of source and target unit - var sourceUnit = c.source.parentElement.innerText; - var targetUnit = c.target.innerText; + // test 'if (label.id == "label")' is obsolete since jsPlumb hands in parameter c : Connection - // add names in relations labels - $("#preLabelRelations").html(sourceUnit + " ist eine"); - $("#postLabelRelations").html("f�r " + targetUnit); + // get name of source and target unit + var sourceUnit = c.source.parentElement.innerText; + var targetUnit = c.target.innerText; - // update current label - current_labelConnection = label.canvas.id; + // add names in relations labels + $("#preLabelRelations").html(sourceUnit + " ist eine"); + $("#postLabelRelations").html("für " + targetUnit); - // clear marking from label connections - $(".aLabel").css("background-color", ""); - $(".aLabel").css("color", ""); + // clear markings from connection labels + $(".aLabel").css("background-color", ""); + $(".aLabel").css("color", ""); + // set label connection mark + $("#" + currentConnectionID).css("background-color", "#1e8151"); + $("#" + currentConnectionID).css("color", "white"); - // set label connection mark - $("#" + current_labelConnection).css("background-color", "#1e8151"); - $("#" + current_labelConnection).css("color", "white"); + // clear unit marking and hide unit properties + $(".w").css("background", ""); + $(".w").css("color", ""); + $(".tabContents").hide(); + $(".tab-Container").hide(); - // clear unit marking and hide unit properties - $(".w").css("background", ""); - $(".w").css("color", ""); - $(".tabContents").hide(); - $(".tab-Container").hide(); + // show relations tab: set label connection property visible + $("#tabUnitLabel").css("display", "block"); - // set label connection property visible - $("#tabUnitLabel").css("display", "block"); + // show right selection of the current label in selection bar + $("#selectRelations").children("option").each(function() { + if ( $(this)[0].value.toUpperCase() == label.label ) { + $("#selectRelations").select2("data", { + id:$(this)[0].value, + text:$(this)[0].innerHTML + }); + } + }); + // needed to prevent clicking the container as well + e.stopPropagation(); - // show right selection of the current label in selection bar - $("#selectRelations").children("option").each(function() { - if ( $(this)[0].value.toUpperCase() == label.label ) { - $("#selectRelations").select2("data", { - id:$(this)[0].value, - text:$(this)[0].innerHTML - }); - } - }); - // needed to prevent clicking the container as well - e.stopPropagation(); - } }); + + // deletes selected connection $("#btnDeleteConnection").on("click", function() { // get connection object - var con = $("#" + current_labelConnection)[0]._jsPlumb.component; + var con = $("#" + currentConnectionID)[0]._jsPlumb.component; // detach connection inst.detach(con); @@ -149,21 +152,9 @@ function initPlumbCanvas() { // get current scenario's JSON var thisScenario = authorSystemContent.getScenario(currentScenario); - var deletableConnection = thisScenario.getConnection(connID); // delete connection in JSON structure - thisScenario.removeConnection(deletableConnection); - - /* for (var n=0; n<myAuthorSystem.length; n++) { - if (myAuthorSystem[n].name == currentScenario) { - for (var l=0; l<myAuthorSystem[n]["connections"].length; l++) { - if (myAuthorSystem[n]["connections"][l].connId == connID) { - myAuthorSystem[n]["connections"].splice(l, 1); - break; - } - } - break; - } - }*/ + thisScenario.removeConnection(thisScenario.getConnection(connID)); + // hide tab after connection was deleted $("#tabUnitLabel").hide(); }); @@ -171,40 +162,28 @@ function initPlumbCanvas() { // triggered if an option for a label connection was selected $("#selectRelations").select2().on("select2-selecting", function(e) { + // set new name on label - $("#" + current_labelConnection).html(e.val.toUpperCase()); - $("#" + current_labelConnection)[0].setAttribute("title", e.choice.text); + $("#" + currentConnectionID).html(e.val.toUpperCase()); + $("#" + currentConnectionID)[0].setAttribute("title", e.choice.text); // unmark label - $("#" + current_labelConnection).css("background-color", ""); - $("#" + current_labelConnection).css("color", ""); + $("#" + currentConnectionID).css("background-color", ""); + $("#" + currentConnectionID).css("color", ""); // hide property in tab $("#tabUnitLabel").hide(); // get connection id and scenario name - var connID = $("#" + current_labelConnection)[0]._jsPlumb.component.id; + var connID = $("#" + currentConnectionID)[0]._jsPlumb.component.id; var currentScenario = $("#lname")[0].innerHTML; - // get current scenario's JSON var thisScenario = authorSystemContent.getScenario(currentScenario); var thisConnection = thisScenario.getConnection(connID); thisConnection.setLabel(e.val.toUpperCase()); thisConnection.setTitle(e.choice.text); - /* // put label text in JSON structure - for (var m=0; m<myAuthorSystem.length; m++) { - if (myAuthorSystem[m].name == currentScenario) { - for (var p=0; p<myAuthorSystem[m]["connections"].length; p++) { - if (myAuthorSystem[m]["connections"][p].connId == connID) { - myAuthorSystem[m]["connections"][p].connLabel = e.val.toUpperCase(); - myAuthorSystem[m]["connections"][p].connTitle = e.choice.text; - break; - } - } - } - }*/ }); @@ -238,6 +217,75 @@ function initPlumbCanvas() { }); }); + + // triggered if learning unit is clicked + $("#stm").children("div.w").click(function(event) { + + // update global variable: UUID of the clicked unit + currentUnitUUID = $(this)[0].getAttribute("id"); + + bool_unitClicked = true; + + // clear marking from all units + clearMarkingFromLearningUnits(); + // unit is marked --> change color + $(this).css("background", "#16a085"); + $(this).css("color", "white"); + // clear marking from label connections + $(".aLabel").css("background-color", ""); + $(".aLabel").css("color", ""); + + // show tab content of the current active tab + var activeTab = $(".tab-Container > ul > li").children("a.active").attr("href"); + $(activeTab).fadeIn(); + $(".tab-Container").show(); + // hide tab from unit label connection + $("#tabUnitLabel").hide(); + + + /* tab "Eigenschaften"*/ + + // get current unit's data model + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); + + // put name into the input field + //var formObject = document.forms["formProperties"]; + $("#inputUnitName")[0].value = current_unit.getName(); + + // set description field + $("#inputUnitDescription")[0].value = current_unit.getDescription(); + + /* tab "Kontextinformation" */ + loadContextTabForUnit(this); + + // prevents that underlying container is also clicked (needed for unit marking) + event.stopPropagation(); + + //console.log(myAuthorSystem); + console.log(JSON.stringify(authorSystemContent)); + + // set listener for button "Bestätigen" in tab "Kontextinformation" + activateContextConfirmation($(this), unitSatisfiesAllContextInfos, current_unit); + }); + + + // triggered if unit was dragged + $("#stm").children("div.w").on("dragstop", function() { + + currentUnitUUID = $(this)[0].getAttribute("id"); + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); + + // get new positions (absolute) + var top = $(this)[0].offsetTop; + var left = $(this)[0].offsetLeft; + + // only set if current unit object exists + if (current_unit) { + current_unit.posX = left; + current_unit.posY = top; + } + }); + } function clearMarkingFromLearningUnits () { diff --git a/js/authoring/controllers/contextInfoController.js b/js/authoring/controllers/contextInfoController.js index 76a20b87d74339f3cb8c8b25257f067cf1bad292..d0555aaa9de75fc714bceb7015933489ce141a4c 100644 --- a/js/authoring/controllers/contextInfoController.js +++ b/js/authoring/controllers/contextInfoController.js @@ -10,25 +10,20 @@ * */ function checkInformation() { - var selectedInfo = {}; var missing_content = ""; // displayed to user if something is missing - var selectedContextInfo = $("#selectContextInfos").select2("data"); + var selectedInfoID = $("#selectContextInfos").select2("data"); var selectedOperator = $("#selectOperator").select2("data"); - - var contextInfoInArray; + var selectedContextInfo; // check selection bar "Kontextinformationen" - if ( selectedContextInfo == null ) { + if ( selectedInfoID == null ) { // if selection bar context information is empty, concatenate it in missing_content string missing_content += " - Kontextinformation\n"; } else { - // update JSON structure - contextInfoInArray = contextList.getItem(selectedContextInfo.id); - selectedInfo.id = selectedContextInfo.id; - selectedInfo.name = contextInfoInArray.name; - selectedInfo.text = translate_contextInformation(contextInfoInArray.name); + // create a copy of the selected context info's JSON structure + selectedContextInfo = $.extend(new ContextInformation(), contextList.getItem(selectedInfoID.id)); } /* // only addable if context info doesn't exist already @@ -47,118 +42,74 @@ function checkInformation() { missing_content += " - Operator\n"; } else { // update JSON structure - selectedInfo.operator = contextInfoInArray.value.operators[selectedOperator.id]; + selectedContextInfo.setOperators(selectedContextInfo.getOperators()[selectedOperator.id]); } - // check input "Wert" is visible AND filled with information - if ( $("#inputContextValue")[0].style.display == "block" && - $("#inputContextValue")[0].disabled == false ) { - - // if input field context value is empty, concatenate it in missing_content string - if ( $("#inputContextValue")[0].value == "" ) { - missing_content += " - Wert\n"; - $("#inputContextValue").parent().addClass("has-error"); - - } else if ($("#inputContextValue").parent().hasClass("has-error")) { - $("#inputContextValue").parent().removeClass("has-error"); - } - - // update JSON structure - selectedInfo.value = $("#inputContextValue")[0].value; - - // check if selection bar "Wert" is visible AND filled with information - } else if ( $("#selectPossibleValues")[0].style.display == "block" && - $("#selectPossibleValues")[0].disabled != true ) { - - // if selection bar context value is empty, concatenate it in missing_content string - if ( $("#selectPossibleValues").select2("data")["text"] == "\r" ) { - missing_content += " - Wert\n"; - } - - // update JSON structure - selectedInfo.value = contextInfoInArray.value.enums[$("#selectPossibleValues").select2("data").id]; - } - - // check parameters (if existent) - contextInfoInArray.parameters.forEach(checkParameter, selectedInfo); - - // if selection bar parameter is empty, concatenate it in missing_content string - if ($("#selectParameter").select2("data")["text"] == "\r") { - missing_content += " - " + $("#selectParameter")[0].labels[0].innerHTML + "\n"; - } - - // TODO: Get selected parameter identifier to get at values! - // update JSON structure - selectedInfo.parameter1 = contextInfoInArray.parameters[0].values[$("#selectParameter").select2("data").id]; + // check and get context value + var contextValue; + switch(selectedContextInfo.getType()) { + case "FLOAT": + case "INTEGER": + case "STRING": + var inputField = $("#inputContextValue"); + // if input field context value is empty, concatenate it in missing_content string + if ( inputField[0].value == "" ) { + missing_content += " - Wert\n"; + inputField.parent().addClass("has-error"); + } else { + inputField.parent().removeClass("has-error"); + contextValue = inputField[0].value; + } + break; + case "ENUM": + case "BOOLEAN": + var selected = $("#selectPossibleValues").select2("data"); + // if selection bar context value is empty, concatenate it in missing_content string + if ( selected["text"] == "\r" ) { + missing_content += " - Wert\n"; + } + contextValue = selectedContextInfo.getEnums()[selected.id]; + break; } - // check selection bar "Parameter" is visible - if ( $("#divParameterSelection2")[0].style.display == "block") { - - // if selection bar parameter is empty, concatenate it in missing_content string - if ($("#selectParameter2").select2("data")["text"] == "\r") { - missing_content += " - " + $("#selectParameter2")[0].labels[0].innerHTML + "\n"; + // update JSON structure + selectedContextInfo.setInputValue(contextValue); + + // check and get parameters (if existent) + var selectedInfoParameters = selectedContextInfo.getParameters(); + for (var i in selectedInfoParameters) { + var parameter = selectedInfoParameters[i]; + var parameterElement = $("#parameter"+i); + var parameterDiv = parameterElement.parent(); + var paramValue; + switch (parameter.getType()) { + case "FLOAT": + case "INTEGER": + case "STRING": + // if input field is empty, concatenate it in missing_content string + if ( parameterElement[0].value == "" ) { + missing_content += " - " + translate_parameter(parameter.getID()) + "\n"; + parameterDiv.addClass("has-error"); + } + else { + parameterDiv.removeClass("has-error"); + paramValue = parameterElement[0].value; + } + break; + case "ENUM": + case "BOOLEAN": + var selected = parameterElement.select2("data"); + // if selection bar parameter is empty, concatenate it in missing_content string + if (selected["text"] == "\r") { + missing_content += " - " + translate_parameter(parameter.getID()) + "\n"; + } + else + paramValue = parameter.getEnums()[selected.id]; + break; } - // update JSON structure - selectedInfo.parameter2 = contextInfoInArray.parameters.values[$("#selectParameter2").select2("data").id]; - } - // check input context parameter 1 is visible - if ( $("#divParameterInput1")[0].style.display == "table-cell" ) { - - // if input field context parameter is empty, concatenate it in missing_content string - if ($("#inputContextParameter1")[0].value == "") { - missing_content += " - " + $("#inputContextParameter1")[0].labels[0].innerHTML + "\n"; - $("#inputContextParameter1").parent().addClass("has-error"); - - } else if ($("#inputContextParameter1").parent().hasClass("has-error")) { - $("#inputContextParameter1").parent().removeClass("has-error"); - } - - // update JSON structure - selectedInfo.input1 = $("#inputContextParameter1")[0].value; - } - // check input context parameter 2 is visible - if ( $("#divParameterInput2")[0].style.display == "table-cell" ) { - - // if input field context parameter is empty, concatenate it in missing_content string - if ($("#inputContextParameter2")[0].value == "") { - missing_content += " - " + $("#inputContextParameter2")[0].labels[0].innerHTML + "\n"; - $("#inputContextParameter2").parent().addClass("has-error"); - - } else if ($("#inputContextParameter2").parent().hasClass("has-error")) { - $("#inputContextParameter2").parent().removeClass("has-error"); - } - - // update JSON structure - selectedInfo.input2 = $("#inputContextParameter2")[0].value; - } - // check input context parameter string is visible - if ( $("#divParameterString")[0].style.display == "block" ) { - - // if input field context parameter is empty, concatenate it in missing_content string - if ($("#inputParameterString")[0].value == "") { - missing_content += " - " + $("#inputParameterString")[0].labels[0].innerHTML + "\n"; - $("#inputParameterString").parent().addClass("has-error"); - - } else if ($("#inputParameterString").parent().hasClass("has-error")) { - $("#inputParameterString").parent().removeClass("has-error"); - } - - // update JSON structure - selectedInfo.inputString = $("#inputParameterString")[0].value; + parameter.setInputValue(paramValue); } // create return array - return [missing_content, selectedInfo]; + return [missing_content, selectedContextInfo]; } - -function checkParameter (parameter, index, parameterArray) { - var param = { - id: parameter.id, - type: parameter.type, - value: $("#parameter"+index).children()[0] : - }; - - - this.parameters.push(param); -} \ No newline at end of file diff --git a/js/authoring/controllers/menuController.js b/js/authoring/controllers/menuController.js index c4817658564a642c9bd37405b260d722ee488b48..83ac82507ce8a6ed53e1d1437505d2b85252fac7 100644 --- a/js/authoring/controllers/menuController.js +++ b/js/authoring/controllers/menuController.js @@ -76,6 +76,7 @@ function changeScenarioNameInMenu(oldName, newName) { function addUnitToMenu(nameCurrentScenario) { var liCurrentScenario; + var currentUnitName = authorSystemContent.getUnitByUUID(currentUnitUUID).getName(); // find correct scenario in menu $("span.title").each(function() { @@ -98,7 +99,7 @@ function addUnitToMenu(nameCurrentScenario) { ulCurrentScenario = liCurrentScenario.children("ul"); // add unit in menu bar - spanNewUnit[0].innerText = global_currentInputUnitName; + spanNewUnit[0].innerText = currentUnitName; aNewUnit.append(spanNewUnit); liNewUnit.append(aNewUnit); ulCurrentScenario.append(liNewUnit); @@ -116,7 +117,7 @@ function addUnitToMenu(nameCurrentScenario) { liCurrentScenario.addClass("has-sub"); // append content name on DOM - spanNewUnit[0].innerText = global_currentInputUnitName; + spanNewUnit[0].innerText = currentUnitName; aNewUnit.append(spanNewUnit); liNewUnit.append(aNewUnit); ulCurrentScenario.append(liNewUnit); diff --git a/js/authoring/controllers/tabs/contextTabController.js b/js/authoring/controllers/tabs/contextTabController.js index b518451509bc12ad19f0893c23c2c034f52ee7c9..a88a142246c6d64bc1a25caee4295644ef3e429d 100644 --- a/js/authoring/controllers/tabs/contextTabController.js +++ b/js/authoring/controllers/tabs/contextTabController.js @@ -50,7 +50,7 @@ function fillContextTab() { var selectedInfo = contextList.getItem(j); // get the corresponding operators to the selected context information - var operators = selectedInfo.value.operators; + var operators = selectedInfo.getOperators(); // clear selection bar $("#selectOperator").empty(); @@ -68,22 +68,25 @@ function fillContextTab() { } // fill input field - fillInputField(contextList.getItem(j).value); + fillInputField(contextList.getItem(j)); // fill parameter selection bar - fillParameterSelection(contextList.getItem(j).parameters); + fillParameterSelection(contextList.getItem(j).getParameters()); }); } function loadContextTabForUnit(unit) { + + var currentUnitModel = authorSystemContent.getUnitByUUID(currentUnitUUID); + // check how much context information are needed to reach SAT - var ciSAT = $(unit).children("div.unit-icons")[0].getAttribute("ci"); - if (ciSAT == "all") { + var sat = currentUnitModel.getSat(); + if (sat == "all") $("#s2id_selectNumberContextInfos").children("a").children("span.select2-chosen").html("Alle"); - } else if (ciSAT == "one") { + else if (sat == "one") $("#s2id_selectNumberContextInfos").children("a").children("span.select2-chosen").html("Eine"); - } + // clear multi selection in context info tab $("#selectMultiContextInfos").empty(); @@ -97,13 +100,14 @@ function loadContextTabForUnit(unit) { escapeMarkup: function(m) {return m;} }); - // TODO: Fetch this unit's context info from model, not icons! - // get data back in multi selection bar from a past edited learning unit - var array_unitIcons = $(unit).find(".unit-icon"); - for (var n=0; n<array_unitIcons.length; n++) { + + // get data back in multi selection bar from a past editing of this learning unit + var currentUnitContextArray = currentUnitModel.getContextData(); + for (var i in currentUnitContextArray) { + var contextID = currentUnitContextArray[i].getID(); array_multiSelectionContextInfos.push({ - "id":$(array_unitIcons[n]).children("img")[0].getAttribute("ccID"), - "text":$(array_unitIcons[n]).children("img")[0].title + "id":contextID, + "text":translate_contextInformation(contextID) }); } // get data in multi selection bar @@ -301,8 +305,7 @@ function fillSelectionContextInformation() { // create option DOM and add the context information var option = $("<option>").attr("value", i.toString()); - option.attr("origin", contextItem.name); // save original name - option.html(translate_contextInformation(contextItem.name)); + option.html(translate_contextInformation(contextItem.getID())); // get first of this context info's classes matching one of the global classes var classIndex = getFirstMatchingClassIndex(contextItem, contextClasses); @@ -329,9 +332,9 @@ function fillSelectionContextInformation() { // fill input field (value in tab Kontexinformation) /** * Function gets the selected context information and decides which input field has to be set on GUI. - * @param {Object} ciValue Contains current context information value details. + * @param {Object} ci Contains current context information object. * */ -function fillInputField(ciValue) { +function fillInputField(ci) { // clear input field caused by removing input field and re-building $("#inputContextValue").remove(); @@ -339,11 +342,8 @@ function fillInputField(ciValue) { .attr("onkeyup", "getInputContextValue(this)"); $("#divContextValue").append(inputField); - // get {type, min, max, default} of the context information - var ciAttributes = ciValue.attributes; - // decide which type of input field is needed - switch (ciAttributes.type) { + switch (ci.getType()) { case "FLOAT": case "INTEGER": @@ -353,7 +353,7 @@ function fillInputField(ciValue) { $("#inputContextValue").css("display", "block"); $("#selectPossibleValues").css("display", "none"); $("#s2id_selectPossibleValues").css("display", "none"); - setMinMaxDefault(ciAttributes, $("#inputContextValue")); + setMinMaxDefault(ci.getMin(), ci.getMax(), ci.getDefault(), $("#inputContextValue")); break; case "STRING": @@ -375,9 +375,10 @@ function fillInputField(ciValue) { $("#selectPossibleValues").select2("data", {id:"\r",text:"\r"}); // fill selection bar - for (var i in ciValue.enums) { + var enums = ci.getEnums(); + for (var i in enums) { var option = $("<option>").attr("value", i.toString()); - option.html(translate_possibleValue(ciValue.enums[i])); + option.html(translate_possibleValue(enums[i])); $("#selectPossibleValues").append(option); } @@ -421,19 +422,19 @@ function fillParameterSelection(cp) { // iterate through all parameters for (var i in cp) { + var thisParam = cp[i]; // get each parameter's translated name, type, and all its possible values - var parameterOriginal = cp[i].id; + var parameterOriginal = thisParam.getID(); var parameterTranslation = translate_parameter(parameterOriginal); - var type = cp[i].type; - var possibleValues = cp[i].values; - - switch (type) { + switch (thisParam.getType()) { // type enum needs a drop down selection for only possible values case "ENUM": - id = "selectParameter" + i; - div = createNamedDOMElement("div", "divParameterSelection"+i) + var enums = thisParam.getEnums(); + + id = "parameter" + i; + div = createNamedDOMElement("div", "divParameter"+i) .css("display", "block") .append(createParameterLabelDOM(id, parameterTranslation)); child = createNamedDOMElement("select", id) @@ -441,11 +442,11 @@ function fillParameterSelection(cp) { .attr("style", "min-width: 235px;"); // append all possible values - for (var j in possibleValues) { + for (var j in enums) { child.append( $("<option>") .attr("value", j.toString()) - .html(translate_parameterValue(possibleValues[j])) + .html(translate_parameterValue(enums[j])) ); } div.append(child); @@ -457,8 +458,8 @@ function fillParameterSelection(cp) { // type float or integer each need an input field and a specific label case "INTEGER": case "FLOAT": - id = "inputContextParameter"+i; - div = createNamedDOMElement("div", "divParameterInput"+i) + id = "parameter"+i; + div = createNamedDOMElement("div", "divParameter"+i) .addClass("divParameterInputs") .css("display", "table-cell") .append(createParameterLabelDOM(id, parameterTranslation)); @@ -466,7 +467,9 @@ function fillParameterSelection(cp) { .addClass("form-control") .attr("type", "number") .attr("onkeyup", "getParameterInput(this,"+i+")"); - setMinMaxDefault(possibleValues[0], child); + + setMinMaxDefault(thisParam.getMin(), thisParam.getMax(), thisParam.getDefault(), child); + div.append(child); divContextParams.append(div); @@ -479,8 +482,8 @@ function fillParameterSelection(cp) { // type string needs an input field and a specific label case "STRING": - id = "inputParameterString"+i; - div = createNamedDOMElement("div", "divParameterString"+i) + id = "parameter"+i; + div = createNamedDOMElement("div", "divParameter"+i) .css("display", "block") .append(createParameterLabelDOM(id, parameterTranslation)); child = createNamedDOMElement("input", id) @@ -503,22 +506,15 @@ function fillParameterSelection(cp) { * @param {Array} values Contains minimum and maximum values. * @param {Object} inputField Contains an input field. * */ -function setMinMaxDefault(values, inputField) { - - if (typeof values === "undefined") - return; - - var min = (values.min != undefined) ? values.min : false; - var max = (values.max != undefined) ? values.max : false; - var def = (values.default != undefined) ? values.default : false; +function setMinMaxDefault(min, max, def, inputField) { - if (min) { + if (min != "") { inputField.attr("min", min); } - if (max) { + if (max != "") { inputField.attr("max", max); } - if (def) { + if (def != "") { inputField.attr("value", def); } } @@ -628,7 +624,7 @@ function getColor(cc) { switch (cc) { case "Lernszenario": return "#3287C8"; - case "Pers�nlich": + case "Persönlich": return "#AF46C8"; case "Situationsbezogen": return "#91F52D"; @@ -647,7 +643,7 @@ function getClassNameColor(classText) { // a little bit cumbersome but slightly easier to maintain switch (classText) { case "Lernszenario": - case "Pers�nlich": + case "Persönlich": case "Infrastruktur": case "Ortung": return "white"; @@ -755,7 +751,7 @@ function changeColorMultiContextInfos() { e.stopPropagation(); }); $(".select2-search-choice-close").hover( - function() {$(this).attr("title", "L�schen")} + function() {$(this).attr("title", "Löschen")} ); /* end new */ @@ -765,7 +761,7 @@ function changeColorMultiContextInfos() { array_multiSelectionContextInfos[i]["text"] == title) { // icon // get color for first context class - var firstClassTranslation = translate_contextClass(contextList.getItem(thisID).classes[0]); + var firstClassTranslation = translate_contextClass(contextList.getItem(thisID).getClasses()[0]); var color = getColor(firstClassTranslation); $(this).parent().css("background-color", color); @@ -781,8 +777,9 @@ function changeColorMultiContextInfos() { // search for this context info's classes in a list of classes and return first match function getFirstMatchingClassIndex(contextItem, contextClasses) { var classIndex; - for (var k in contextItem.classes) { - classIndex = contextClasses.indexOf(contextItem.classes[k]); + var classes = contextItem.getClasses(); + for (var k in classes) { + classIndex = contextClasses.indexOf(classes[k]); if (classIndex != -1) break; } diff --git a/js/authoring/controllers/tabs/generalTabController.js b/js/authoring/controllers/tabs/generalTabController.js index 51080f7ea24ced22e1eb62e8a6950c4168f6bc2b..262aec342d6f74719968a360aab079a3a1b97c97 100644 --- a/js/authoring/controllers/tabs/generalTabController.js +++ b/js/authoring/controllers/tabs/generalTabController.js @@ -36,10 +36,7 @@ $(function() { * @param {Object} newState Contains new created learning unit. */ function activateFunctionalities(newState) { - - // get id from new state (unit) - var id = newState[0].getAttribute("id"); - var unit = document.getElementById(id); + var unit = newState[0]; // creates variable which decides whether all or one context information have to be satisfied // default is all have to be satisfied @@ -48,61 +45,12 @@ function activateFunctionalities(newState) { // get newState id in unit list list_units.push(unit); - var current_unit; - - // triggered if learning unit is clicked - $(unit).click(function(event) { - - bool_unitClicked = true; - // get name of the unit - if ($(unit).children("div").hasClass("title")) { - global_currentInputUnitName = this.innerText.replace(/(\r\n|\n|\r)/gm,""); - } - - // clear marking from all units - clearMarkingFromLearningUnits(); - // unit is marked --> change color - $(unit).css("background", "#16a085"); - $(unit).css("color", "white"); - // clear marking from label connections - $(".aLabel").css("background-color", ""); - $(".aLabel").css("color", ""); - - // show tab content of the current active tab - var activeTab = $(".tab-Container > ul > li").children("a.active").attr("href"); - $(activeTab).fadeIn(); - $(".tab-Container").show(); - // hide tab from unit label connection - $("#tabUnitLabel").hide(); - - - /* tab "Eigenschaften"*/ - - // put name into the input field - //var formObject = document.forms["formProperties"]; - $("#inputUnitName")[0].value = global_currentInputUnitName; - - current_unit = getCurrentUnitDataModel(); - - // set description field - $("#inputUnitDescription")[0].value = current_unit.getDescription(); - - /* tab "Kontextinformation" */ - loadContextTabForUnit(unit); - - // prevents that underlying container is also clicked (needed for unit marking) - event.stopPropagation(); - - //console.log(myAuthorSystem); - console.log(JSON.stringify(authorSystemContent)); - - // set listener for button "Bestätigen" in tab "Kontextinformation" - activateContextConfirmation(unit, unitSatisfiesAllContextInfos, current_unit); - }); // triggered if one option was selected ("Eine" or "Alle") $("#selectNumberContextInfos").select2().on("select2-selecting", function(e) { + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); + // decides that one of the group of selected context information has to be satisfied (1 == "Eine") if (e.val == 1) { @@ -146,44 +94,6 @@ function activateFunctionalities(newState) { } }); - // triggered if string is changed in input field in tab "Eigenschaften" - $("#inputUnitName").bind("input", function() { - - // store old name - var old_name = global_currentInputUnitName; - - // get current input field value - global_currentInputUnitName = $(this).val(); - - // change unit name if his corresponding input field is changing - $(unit).children("div.title")[0].innerText = global_currentInputUnitName; - //name = $(unit).children("div.title")[0].innerText; - - // find right scenario in menu bar - var scenarioName = $("#lname")[0].innerText; - var findScenario = $("span.title").filter(":contains('" + scenarioName + "')"); - findScenario = findScenario.parent("a").parent("li"); - - // change name in menu bar - if (findScenario.length != 0) { - var findUnit = findScenario.children("ul").children("li").children("a") - .children("span").filter(":contains('" + old_name + "')"); - findUnit[0].innerHTML = global_currentInputUnitName; - } - - // update JSON structure - current_unit.setName(global_currentInputUnitName); - - // necessary to redraw endpoints - inst.repaintEverything(); - - }); - - // triggered if string is changed in description field in tab "Eigenschaften" - $("#inputUnitDescription").bind("input", function() { - // update JSON structure with current input field value - current_unit.setDescription($(this).val()); - }); // triggered if an operator was selected in tab "Kontextinformation" $("#selectOperator").select2().on("select2-selecting", function(e) { @@ -235,8 +145,9 @@ function activateFunctionalities(newState) { $(unit).css("padding-top", ""); } + // update JSON structure - var currentUnitContextList = current_unit.getContextData(); + var currentUnitContextList = authorSystemContent.getUnitByUUID(currentUnitUUID).getContextData(); for (var i in currentUnitContextList) { if (currentUnitContextList[i].name == e.choice.text) { currentUnitContextList.splice(i, 1); @@ -249,18 +160,9 @@ function activateFunctionalities(newState) { }); - // triggered if unit was dragged - $(unit).on("dragstop", function() { - // get new positions (absolute) - var top = $(unit)[0].offsetTop; - var left = $(unit)[0].offsetLeft; - // only set if current unit object exists - if (current_unit) { - current_unit.posX = left; - current_unit.posY = top; - } - }); + + // clear marking from existing learning units clearMarkingFromLearningUnits(); diff --git a/js/authoring/controllers/tabs/propertiesTabController.js b/js/authoring/controllers/tabs/propertiesTabController.js index b58a78df0b782616eb925624c9477b2e87e300d8..9f1fdb0ec87620e58ec126c62a092898d572a942 100644 --- a/js/authoring/controllers/tabs/propertiesTabController.js +++ b/js/authoring/controllers/tabs/propertiesTabController.js @@ -3,6 +3,51 @@ */ $(function() { + + // triggered if string is changed in input field in tab "Eigenschaften" + $("#inputUnitName").bind("input", function() { + + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); + + // store old name + var oldName = current_unit.getName(); + + // get current input field value + var newName = $(this).val(); + + // change unit name if his corresponding input field is changing + $("#" + currentUnitUUID).children("div.title")[0].innerText = newName; + //name = $(unit).children("div.title")[0].innerText; + + // find right scenario in menu bar + var scenarioName = $("#lname")[0].innerText; + var findScenario = $("span.title").filter(":contains('" + scenarioName + "')"); + findScenario = findScenario.parent("a").parent("li"); + + // change name in menu bar + if (findScenario.length != 0) { + var findUnit = findScenario.children("ul").children("li").children("a") + .children("span").filter(":contains('" + oldName + "')"); + findUnit[0].innerHTML = newName; + } + + // update JSON structure + current_unit.setName(newName); + + // necessary to redraw endpoints + inst.repaintEverything(); + + }); + + // triggered if string is changed in description field in tab "Eigenschaften" + $("#inputUnitDescription").bind("input", function() { + + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); + + // update JSON structure with current input field value + current_unit.setDescription($(this).val()); + }); + // delete unit after confirming deletion in tab "Eigenschaften" $("#btnDeleteUnit").on("click", function() { // get unit name from input field diff --git a/js/authoring/controllers/unitController.js b/js/authoring/controllers/unitController.js index 3483e83ac91d0b44a2b29434ccefbae34912ebc6..8cbca3f48e1a4092ed0a57743c404f8d6a8ba136 100644 --- a/js/authoring/controllers/unitController.js +++ b/js/authoring/controllers/unitController.js @@ -18,15 +18,15 @@ function createUnit() { stateName.keyup(function(e) { if (e.keyCode === 13) { - global_currentInputUnitName = this.value; + var unitName = this.value; // prevent unnamed units - if (global_currentInputUnitName == "") { + if (unitName == "") { alert("[Fehler] Bitte geben Sie einen Namen ein.\n"); return false; } // set unit name - $(this).parent().text(global_currentInputUnitName); + $(this).parent().text(unitName); // set event listeners activateFunctionalities(newState); @@ -40,7 +40,7 @@ function createUnit() { // update JSON structure: get new unit in its scenario var newUnit = new Unit(); newUnit.setUUID(uuid); - newUnit.setName(global_currentInputUnitName); + newUnit.setName(unitName); authorSystemContent.getScenario(nameCurrentScenario).addUnit(newUnit); // hide tabs because all units will be unmarked @@ -67,7 +67,7 @@ function createUnit() { * */ function loadUnit(unit, j) { - var newState = buildUnitDOM(unit.getUID(), unit.getName()); + var newState = buildUnitDOM(unit.getUUID(), unit.getName()); var divContextIcons = newState.children(".unit-icons")[0]; // get all context information @@ -123,8 +123,8 @@ function loadUnit(unit, j) { plumbUnit(newState); - return newState; - + // set event listeners + activateFunctionalities(newState); } // set properties for newly created unit in jsPlumb instance @@ -185,7 +185,7 @@ function chooseMetaIcon(metaDataName) { function addMetaDataToUnit(metaDatum, unit) { // update JSON structure - var current_unit = getCurrentUnitDataModel(); + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); current_unit.addMetaInfo({ name : metaDatum, icon : metaIcon @@ -223,7 +223,7 @@ function addMetaDataToUnit(metaDatum, unit) { function removeMetaDataFromUnit(metaDatum, unit) { // update JSON structure - var current_unit = getCurrentUnitDataModel(); + var current_unit = authorSystemContent.getUnitByUUID(currentUnitUUID); var currentUnitMetaData = current_unit.getMetaData(); for (var j in currentUnitMetaData) { if (currentUnitMetaData[j].name == metaDatum) { @@ -248,33 +248,6 @@ function removeMetaDataFromUnit(metaDatum, unit) { inst.repaintEverything(); } -// temporary helper function: returns the data model of the currently clicked unit -function getCurrentUnitDataModel() { - - var currentScenario = authorSystemContent.getScenario($("#lname")[0].innerText); - return currentScenario.getUnitByName(global_currentInputUnitName); - -/* // get current unit dictionary if scenario was loaded - if (loadedData) { - for (var q=0; q<loadedData["units"].length; q++) { - if (loadedData["units"][q]["name"] == global_currentInputUnitName) { - return loadedData["units"][q]; - } - } - } - // get current unit dictionary - for (var p=0; p<myAuthorSystem.length; p++) { - if (myAuthorSystem[p]["name"] == $("#lname")[0].innerText) { - for (var q=0; q<myAuthorSystem[p]["units"].length; q++) { - if (myAuthorSystem[p]["units"][q]["name"] == global_currentInputUnitName) { - return myAuthorSystem[p]["units"][q]; - } - } - } - }*/ -} - - // build unit DOM function buildUnitDOM(uuid, name) { diff --git a/js/authoring/models/authorSystemContentModel.js b/js/authoring/models/authorSystemContentModel.js index d28a68340ab7f0e925dfc43629eb563cfdfdd43d..798c4af37d01c11b38441c004a76b750734ea937 100644 --- a/js/authoring/models/authorSystemContentModel.js +++ b/js/authoring/models/authorSystemContentModel.js @@ -35,6 +35,12 @@ AuthorSystemContent.prototype.getScenarios = function() { return this._scenarioList; }; +AuthorSystemContent.prototype.getUnitByUUID = function(uuid) { + var unit; + for (var i in this._scenarioList) + unit = this._scenarioList[i].getUnitByUUID(uuid); + return unit; +}; AuthorSystemContent.prototype.getScenario = function(scenarioName) { for (var i in this._scenarioList) { diff --git a/js/authoring/models/contextInfoModel.js b/js/authoring/models/contextInfoModel.js index fb03d80b1147867f1ace830ba688d4f40c3faa46..cdd8d66d212e2fb995063ad26dc116110c959524 100644 --- a/js/authoring/models/contextInfoModel.js +++ b/js/authoring/models/contextInfoModel.js @@ -7,28 +7,102 @@ // the list of all available context information data types function ContextInformation() { - this._name = ""; + this._id = ""; this._classes = []; - this._value = { - attributes:{ - type:"", - min:"", - max:"", - default:"" - }, - operators:[], - enums:[] - }; + this._type = ""; + this._min = ""; + this._max = ""; + this._default = ""; + this._inputValue = ""; + this._operators = []; + this._enums = []; this._parameters = []; return this; } +// getters +ContextInformation.prototype.getID = function () { + return this._id; +}; -function Parameter() { - this._id = ""; - this._type = ""; - this._values = []; +ContextInformation.prototype.getClasses = function () { + return this._classes; +}; + +ContextInformation.prototype.getType = function () { + return this._type; +}; + +ContextInformation.prototype.getMin = function () { + return this._min; +}; + +ContextInformation.prototype.getMax = function () { + return this._max; +}; + +ContextInformation.prototype.getDefault = function () { + return this._default; +}; + +ContextInformation.prototype.getInputValue = function () { + return this._inputValue; +}; + +ContextInformation.prototype.getOperators = function () { + return this._operators; +}; + +ContextInformation.prototype.getEnums = function () { + return this._enums; +}; + +ContextInformation.prototype.getParameters = function () { + return this._parameters; +}; + +// setters +ContextInformation.prototype.setID = function (id) { + this._id = id; +}; + +ContextInformation.prototype.setClasses = function (classes) { + this._classes = classes; +}; + +ContextInformation.prototype.setType = function (type) { + this._type = type; +}; + +ContextInformation.prototype.setMin = function (min) { + if (min) + this._min = min; +}; + +ContextInformation.prototype.setMax = function (max) { + if (max) + this._max = max; +}; + +ContextInformation.prototype.setDefault = function (def) { + if (def) + this._default = def; +}; + +ContextInformation.prototype.setInputValue = function (value) { + this._inputValue = value; +}; + +ContextInformation.prototype.setOperators = function (operators) { + this._operators = operators; +}; + +ContextInformation.prototype.setEnums = function (enums) { + this._enums = enums; +}; + +ContextInformation.prototype.setParameters = function (parameters) { + this._parameters = parameters; +}; - return this; -} \ No newline at end of file diff --git a/js/authoring/models/parameterModel.js b/js/authoring/models/parameterModel.js new file mode 100644 index 0000000000000000000000000000000000000000..be3014f4d2dd88ca9f7445000422880ce8f0a697 --- /dev/null +++ b/js/authoring/models/parameterModel.js @@ -0,0 +1,78 @@ +/** + * Created by elis on 24.11.2015. + */ + + +function Parameter() { + this._id = ""; + this._type = ""; + this._min = ""; + this._max = ""; + this._default = ""; + this._inputValue = ""; + this._enums = []; + + return this; +} + +// getters +Parameter.prototype.getID = function () { + return this._id; +}; + +Parameter.prototype.getType = function () { + return this._type; +}; + +Parameter.prototype.getMin = function () { + return this._min; +}; + +Parameter.prototype.getMax = function () { + return this._max; +}; + +Parameter.prototype.getDefault = function () { + return this._default; +}; + +Parameter.prototype.getInputValue = function () { + return this._inputValue; +}; + +Parameter.prototype.getEnums = function () { + return this._enums; +}; + + +// setters +Parameter.prototype.setID = function (id) { + this._id = id; +}; + +Parameter.prototype.setType = function (type) { + this._type = type; +}; + +Parameter.prototype.setMin = function (min) { + if (min) + this._min = min; +}; + +Parameter.prototype.setMax = function (max) { + if (max) + this._max = max; +}; + +Parameter.prototype.setDefault = function (def) { + if (def) + this._default = def; +}; + +Parameter.prototype.setInputValue = function (value) { + this._inputValue = value; +}; + +Parameter.prototype.setEnums = function (enums) { + this._enums = enums; +}; \ No newline at end of file diff --git a/js/authoring/models/xmlParser.js b/js/authoring/models/xmlParser.js index 4cd049b86eaa39aa9aaa2bd616928175fa139f8e..dba2c2913efb055ad17c24fd70f1a03c8a4c9b64 100644 --- a/js/authoring/models/xmlParser.js +++ b/js/authoring/models/xmlParser.js @@ -27,9 +27,10 @@ function parseContextInfoXML () { // parse all needed information from the xml file $('information', xml).each(function() { + var newInfo = new ContextInformation(); - /* get the name of the information */ - var name = this.getAttribute("id"); + /* get the ID of the information */ + var id = this.getAttribute("id"); /* get the context classes from the current information */ @@ -46,12 +47,10 @@ function parseContextInfoXML () { // get border minimum if given, else null // get border maximum if given, else null // get default value if given, else null - var contextValueAttributes = { - type:contextValue[0].getAttribute("type"), - min:contextValue[0].getAttribute("min"), - max:contextValue[0].getAttribute("max"), - default:contextValue[0].getAttribute("default") - }; + var type = contextValue[0].getAttribute("type"); + var min = contextValue[0].getAttribute("min"); + var max = contextValue[0].getAttribute("max"); + var def = contextValue[0].getAttribute("default"); // 2. all possible operators @@ -67,65 +66,59 @@ function parseContextInfoXML () { array_possibleValues.push(this.innerHTML); }); - - // combine attributes, operators, and possible values in one object - var value = { - attributes:contextValueAttributes, - operators:array_operators, - enums:array_possibleValues - }; - - /* get the parameters (if parameter section exists) */ var array_parameters = []; // for each parameter $('parameters', this).children("parameter").each(function() { + var newParam = new Parameter(); + // get id of parameter var pid = this.getAttribute("id"); - var array_paramValues = []; // all parameter values var paraValue = $(this).children("parameterValue"); paraValue.each(function() { - // get the type of each parameter value + + // get each parameter' specs var type = this.getAttribute("type"); - // different types have different values - switch (type) { - case "ENUM": - // get the only possible values for this parameter - paraValue.children("possibleValues").children("value").each(function() { - array_paramValues.push(this.innerHTML); - }); - break; - case "FLOAT": - // floats have always a minimum and maximum value - array_paramValues.push({ - min:this.getAttribute("min"), - max:this.getAttribute("max") - }); - break; - case "INTEGER": - case "STRING": - break; + var min = this.getAttribute("min"); + var max = this.getAttribute("max"); + var def = this.getAttribute("default"); + var array_paramValues = []; + + // get enums if given + if (type == "ENUM") { + // get the only possible values for this parameter + paraValue.children("possibleValues").children("value").each(function() { + array_paramValues.push(this.innerHTML); + }); } + newParam.setID(pid); + newParam.setType(type); + newParam.setMin(min); + newParam.setMax(max); + newParam.setDefault(def); + newParam.setEnums(array_paramValues); + // push all parameters into an array - array_parameters.push({ - id:pid, - type:type, - values:array_paramValues - }); + array_parameters.push(newParam); }); }); + newInfo.setID(id); + newInfo.setClasses(array_classes); + newInfo.setType(type); + newInfo.setMin(min); + newInfo.setMax(max); + newInfo.setDefault(def); + newInfo.setOperators(array_operators); + newInfo.setEnums(array_possibleValues); + newInfo.setParameters(array_parameters); + // gather all information - contextInfoList.push({ - name:name, - classes:array_classes, - value:value, - parameters:array_parameters - }); + contextInfoList.push(newInfo); }); contextList.setItems(contextInfoList); diff --git a/js/main.js b/js/main.js index 5063bfdad516c4161c803dd1cd8c58b25ae0e0d7..711607a12a8f2d1621fa28d852404bf4f6abb75a 100644 --- a/js/main.js +++ b/js/main.js @@ -7,7 +7,7 @@ var inst; var bool_unitClicked = false; var list_units = []; -var global_currentInputUnitName = ""; +var currentUnitUUID = ""; var global_currentScenarioName = ""; var contextList = new ContextInfoList(); // will be deleted once refactoring is complete