+ in index.html: added simulator js and css files and menu options

+ added timelineController and simulationController
+ added simulator.html containing code to be loaded on demand by jquery
# changed fromJSON() in ContextInformation and ContextInfoList: the former now makes a "deep cast" incl. parameters, simplifying the latter
+ added reset functions to Parameter, ContextInformation and ContextInfoList for resetting chosen values to ""
+ added getScenarioContext() to Scenario and getContextInformation() to AuthorSystemContent: return lists of context items added to units in the author system
+ added hasContext() to Scenario and AuthorSystemContent: returns true if context has been added to a unit by the author
- removed now superfluous event handler from main (was there for testing download)
+ added new event handler to simulatorController

index.html

@@ -48,6 +48,8 @@
         <script type="text/javascript" src="js/authoring/controllers/navBarController.js"></script>
         <script type="text/javascript" src="js/authoring/controllers/sliderController.js"></script>
         <script type="text/javascript" src="js/authoring/controllers/unitController.js"></script>
+        <script type="text/javascript" src="js/authoring/controllers/simulator/simulationController.js"></script>
+        <script type="text/javascript" src="js/authoring/controllers/simulator/timelineController.js"></script>
 
         <!-- tab controllers -->
         <script type="text/javascript" src="js/authoring/controllers/tabs/contextTabController.js"></script>
@@ -95,6 +97,7 @@
 
         <link rel="stylesheet" href="css/tabs.css">
         <link rel="stylesheet" href="css/navigation.css">
+        <link rel="stylesheet" href="css/timeline.css">
 
 
         <!-- google maps api -->
@@ -123,8 +126,8 @@
                             <ul class="dropdown-menu">
                                 <li id="showNewScenario"><a href="#">Erstellen <b class="fui-plus" style="float: right"></b></a></li>
                                 <li id="deleteScenario"><a href="#">Löschen <b class="fui-trash" style="float: right"></b></a></li>
-                                <li id="loadScenario"><a href="#">Laden <b class="fui-upload3" style="float: right"></b></a></li>
-                                <li id="saveScenario"><a download="szenario.json">Speichern <b class="fui-download3" style="float: right"></b></a></li>
+                                <li id="loadScenario"><a href="#">Laden <b class="fui-upload" style="float: right"></b></a></li>
+                                <li id="saveScenario"><a download="szenario.json">Speichern <b class="fui-export" style="float: right"></b></a></li>
                             </ul>
                         </li>
                         <li class="dropdown">
@@ -137,9 +140,12 @@
                         <!--<li><a href="#test"><b class="fui-exit"></b> Testen</a></li>-->
                         <!--<li id="navHeadStatistic"><a href="#statistic"><img src="img/Icons/iconmonstr-bar-chart-icon-32.png"> Statistiken</a></li>-->
                         <li class="dropdown">
-                            <a id="navHeadStatistic" href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="fui-folder-download"></b> Statistiken</a>
+                            <a id="contextSimulation" href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="fui-play"></b> Kontextsimulation <b class="caret"></b></a>
                             <ul class="dropdown-menu">
-                                <li id="downloadContextData"><a href="#">Herunterladen <b class="fui-download3" style="float: right"></b></a></li>
+                                <li id="createSimulation"><a href="#">Erstellen <b class="fui-plus" style="float: right"></b></a></li>
+                                <li id="openSimulation"><a href="#">Öffnen <b class="fui-folder-open" style="float: right"></b></a></li>
+                                <li id="deleteSimulation"><a href="#">Löschen <b class="fui-trash" style="float: right"></b></a></li>
+                                <li id="importSimulation"><a href="#">Importieren <b class="fui-upload" style="float: right"></b></a></li>
                             </ul>
                         </li>
                     </ul>
@@ -201,6 +207,9 @@
             <!-- Property area -->
             <div class="properties">
 
+                <div id="simulatorContainer"></div>
+
+
                 <!-- tabs header-->
                 <div class="tab-Container">
                     <ul>

js/authoring/controllers/simulator/simulationController.js

+/**
+ * Created by Helena on 06.01.2016.
+ */
+
+
+/**
+ * Initialize timeline
+ */
+$(function() {
+
+    // event handler listening for click on "Kontextsimulation" in horizontal menu (top)
+    // TODO: Consider switching between scenarios!
+    $("#contextSimulation").on("click", function() {
+
+        var currentScenarioName = $("#lname")[0].innerHTML;
+        var scenarioContextList;
+
+        if (currentScenarioName) {
+            // get a list of all context information items added in this scenario, with chosen values reset to ""
+            scenarioContextList = authorSystemContent.getScenario(currentScenarioName).getScenarioContext();
+        }
+
+        // init the simulation editor timeline
+        $.get( "simulator.html", function( data ) {
+            $( "#simulatorContainer" ).html( data );
+
+            // create a column for each ContextInformation object
+            createColumns(scenarioContextList ? scenarioContextList.length : 0);
+
+            // set event handlers for these generated cells
+            setCellEventHandlers();
+        });
+
+    });
+
+});
\ No newline at end of file

js/authoring/controllers/timelineController.js → js/authoring/controllers/simulator/timelineController.js

@@ -13,50 +13,23 @@ var xFirstCellLeft, yFirstCellTop; //  coordinates of clicked cell (in px)
 var horizontalBorderPx = 2; // a marked cell's top and bottom border sum in px
 var verticalBorderPx = 4;  // a marked cell's left and right border sum in px
 
-/**
- * Initialize timeline
- */
-$(function() {
-
-    // get the list of all contextInformation items that were added in the author system
-    var contextList = new ContextInfoList();
-    $.get("data.json", function(data) {
-        // and convert all items to their proper model type: ContextInformation (incl. Parameter)
-        contextList.fromJSON(data);
-
-        // create a column for each ContextInformation object
-        createColumns(contextList.getItems());
-
-        // set event handlers for these generated cells
-        setCellEventHandlers();
-    });
-
-});
-
 
 /**
  * Create one column per (unique) context item
  * @param contextList An array containing all context items (incl. duplicates) added in the author system
  */
-function createColumns(contextList) {
-    // functions as a set of unique context item IDs
-    var itemIDList = [];
-    // iterate through all context items
-    for (var i in contextList) {
-        var contextItemID = contextList[i].getID();
-
-        // ensure IDs are unique (no duplicates)
-        if (itemIDList.indexOf(contextItemID) == -1) {
-            itemIDList.push(contextItemID);
-
-            // add one column for each unique item
-            $(".timelineStep").each(function() {
-                var newCell = $("<td>")
-                    .addClass("timelineCell")
-                    .attr("contextID", contextItemID);
-                $(this).append(newCell);
-            });
-        }
+function createColumns(contextListLength) {
+    // in case no context has been added to any unit in the scenario yet
+    if (contextListLength == 0 || typeof contextListLength == "undefined")
+        contextListLength = 5;
+
+    for (var i = 0; i < contextListLength; i++) {
+
+        // add one column for each context item
+        $(".timelineStep").each(function() {
+            var newCell = $("<td>").addClass("timelineCell");
+            $(this).append(newCell);
+        });
     }
 }
 
@@ -83,8 +56,8 @@ function _mousedown(event) {
 
     yOnMousedown = event.pageY;
     xOnMousedown = event.pageX;
-    xFirstCellLeft = $(this).position().left;
-    yFirstCellTop = $(this).position().top;
+    xFirstCellLeft = $(this).offset().left;
+    yFirstCellTop = $(this).offset().top;
 }
 
 /**
@@ -114,18 +87,19 @@ function _mouseup(event) {
     // if the mouse has been down, and is now released
     if (down) {
         // get height of marked area
-        var height = _getHeight();
+        var height = _getHeight(event);
 
         // prevent erroneous behavior when cursor is dragged beyond top
         if (event.pageY > yFirstCellTop) {
 
             // create and add the draggable, resizable information container
             var eventDiv = _createEventDiv(height);
-            var popoverDiv = _createPopover();
+            //var popoverDiv = _createPopover();
 
             // TODO: just a mock-up for now, will be replaced by formatting in author system
             var contextColor = "#"+((1<<24)*Math.random()|0).toString(16);
-            eventDiv.css("background-color", contextColor);
+            eventDiv.css("background-color", contextColor)
+                .css("z-index", 1000);
 
             // add new div to timeline
             $("#timelineContainer").append(eventDiv);
@@ -207,9 +181,9 @@ function _createPopover () {
 function _mark(event) {
 
     $('.timelineCell').each(function () {
-        var top = $(this).position().top;
+        var top = $(this).offset().top;
         var bottom = top + $(this).height()+horizontalBorderPx;
-        var left = $(this).position().left;
+        var left = $(this).offset().left;
         var right = left + $(this).width()+verticalBorderPx;
 
         if( bottom > yOnMousedown && event.pageY >= top && xOnMousedown >= left && xOnMousedown < right)
@@ -238,7 +212,7 @@ function _unmark() {
  * @private
  */
 function _bottom(element){
-    return $(element).position().top + $(element).height()+horizontalBorderPx;
+    return $(element).offset().top + $(element).height()+horizontalBorderPx;
 }
 
 /**
@@ -246,7 +220,7 @@ function _bottom(element){
  * @returns {number} The height of the selected, i.e. marked area in px
  * @private
  */
-function _getHeight() {
+function _getHeight(event) {
     // if a single cell was clicked, without dragging, mark it (to access it afterwards)
     if (!dragging)
         _mark(event);

js/authoring/models/authorSystemContentModel.js

@@ -63,18 +63,23 @@ AuthorSystemContent.prototype.removeScenario = function(scenarioName) {
     }
 };
 
+// returns a list of all context items added in all scenarios, chosen values reset to ""
 AuthorSystemContent.prototype.getContextInformation = function() {
     var contextList = [];
     for (var i in this._scenarioList) {
-        var unitList = this._scenarioList[i].getUnits();
-        for (var j in unitList) {
-            var unitContext = unitList[j].getContextData();
-            for (var k in unitContext) {
-                var contextItem = unitContext[k];
-                if (contextList.indexOf(contextItem) == -1)
-                    contextList.push(contextItem);
-            }
-        }
+        var scenarioContext = this._scenarioList[i].getScenarioContext();
+        for (var j in scenarioContext)
+            contextList.push(scenarioContext[j]);
     }
     return contextList;
+};
+
+/**
+ * Same as in scenarioModel, only for whole content (i.e. all scenarios).
+ * @returns {boolean} true if any conntext has been added, else false.
+ */
+AuthorSystemContent.prototype.hasContext = function() {
+    for (var i in this._scenarioList)
+        if (this._scenarioList[i].hasContext()) return true;
+    return false;
 };
\ No newline at end of file

js/authoring/models/contextInfoListModel.js

@@ -47,20 +47,8 @@ function ContextInfoList() {
 // generates and adds a new items list from a list of JSON objects duck-typable as ContextInformation
 ContextInfoList.prototype.fromJSON = function (data) {
     for (var i in data) {
-        // "cast" the context items to ContextInformation and remove previously entered values
-        var contextItem = new ContextInformation().fromJSON(data[i]);
-        contextItem.setChosenValue("");
-        contextItem.setChosenOperator("");
-
-        // "cast" the item's parameters to Parameter and remove previously entered values
-        var parameters = [], tempParams = contextItem.getParameters();
-        for (var ip in tempParams) {
-            var param = new Parameter().fromJSON(tempParams[ip]);
-            param.setChosenValue("");
-            parameters.push(param);
-        }
-        contextItem.setParameters(parameters);
-        this._items.push(contextItem);
+        // "cast" the context items to ContextInformation (incl. Parameter)
+        this._items.push(new ContextInformation().fromJSON(data[i]));
     }
 };
 
@@ -77,6 +65,14 @@ ContextInfoList.prototype.addItem = function (item) {
     this._items.push(item);
 };
 
+// if list contains context items with chosen values, remove these (i.e. reset to "")
+ContextInfoList.prototype.resetAllContextValues = function() {
+    for (var i in this._items) this._items[i].resetAllValues();
+};
+
+
+// getter
+
 ContextInfoList.prototype.getItems = function () {
     return this._items;
 };

js/authoring/models/contextInfoModel.js

@@ -22,8 +22,17 @@ function ContextInformation() {
 
 // support "casting" a duck-typed JSON object to ContextInformation
 ContextInformation.prototype.fromJSON = function(item) {
-    for (i in item)
-        this[i] = item[i];
+    // copy all values (shallow copy)
+    for (i in item) this[i] = item[i];
+
+    // "cast" parameters to type Parameter (deep copy)
+    var parameters = [], tempParams = this._parameters;
+    for (var ip in tempParams) {
+        var param = new Parameter().fromJSON(tempParams[ip]);
+        parameters.push(param);
+    }
+    this._parameters = parameters;
+
     return this;
 };
 
@@ -120,6 +129,14 @@ ContextInformation.prototype.setParameters = function (parameters) {
     this._parameters = parameters;
 };
 
+// reset all chosen values
+ContextInformation.prototype.resetAllValues = function() {
+    this._chosenOperator = "";
+    this._chosenValue = "";
+    for (var i in this._parameters)
+        this._parameters[i].resetValue();
+};
+
 
 /***** JSON-LD formatting *****/
 

js/authoring/models/parameterModel.js

@@ -18,7 +18,6 @@ function Parameter() {
 // support "casting" a duck-typed JSON object to Parameter
 Parameter.prototype.fromJSON = function(item) {
     for (i in item) this[i] = item[i];
-
     return this;
 };
 
@@ -84,6 +83,9 @@ Parameter.prototype.setEnums = function (enums) {
     this._enums = enums;
 };
 
+Parameter.prototype.resetValue = function () {
+    this._chosenValue = "";
+};
 
 
 // JSON-LD formatting

js/authoring/models/scenarioModel.js

@@ -77,4 +77,41 @@ Scenario.prototype.removeConnection = function(connId) {
         if (conn.getID() == connId)
             this._connections.splice(i, 1);
     }
+};
+
+
+/**
+ * Goes through all units of this scenario and gets (copies of) their associated context information items.
+ * Chosen values will be reset to "".
+ *
+ * @returns {Array} A list of all context items relevant to this scenario.
+ */
+Scenario.prototype.getScenarioContext = function() {
+    var contextList = [];
+    // for each unit ...
+    for (var i in this._units) {
+        // ... get its associated context items
+        var unitContext = this._units[i].getContextData();
+        for (var j in unitContext) {
+            // make a deep copy of each
+            var contextItem = new ContextInformation().fromJSON(unitContext[j]);
+            // reset chosen values
+            contextItem.resetAllValues();
+
+            // and add it to return list, avoiding unnecessary duplicates
+            if (contextList.indexOf(contextItem) == -1)
+                contextList.push(contextItem);
+        }
+    }
+    return contextList;
+};
+
+/**
+ * Find out if any context was added to any of the units in this scenario.
+ * @returns {boolean} true if there is context, else false.
+ */
+Scenario.prototype.hasContext = function() {
+    for (var i in this._units)
+        if (this._units[i].getContextData().length != 0) return true;
+    return false;
 };
\ No newline at end of file

js/main.js

@@ -28,14 +28,4 @@ jsPlumb.ready(function () {
     initPlumbCanvas();
     // reload data from localStorage
     initLoader();
-
-    $("#navHeadStatistic").on("click", function() {
-        var obj = authorSystemContent.getContextInformation();
-        var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
-
-        var a = $("#downloadContextData > a")[0];
-        a.href = 'data:' + data;
-        a.download = 'data.json';
-    });
-
 });
\ No newline at end of file

simulator.html

+<div id="timelineContainer">
+    <table id="timelineTable" class="ui-widget">
+        <tbody>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">
+                0
+            </td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">1</td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">2</td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">3</td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">4</td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">5</td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">6</td>
+            <td class="timelineScale"></td>
+        </tr>
+        <tr class="timelineStep">
+            <td class="timelineStepLabel">
+                7
+            </td>
+            <td class="timelineScale"></td>
+        </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file