accurator/commit

Extended values of Field object.

diff --git a/lib/accurator/ui_elements.pl b/lib/accurator/ui_elements.pl
index 601805e..e55fc8d 100644
--- a/lib/accurator/ui_elements.pl
+++ b/lib/accurator/ui_elements.pl
@@ -156,8 +156,10 @@ metadata(full, Uri, Metadata) :-
 	    Properties),
 	get_title(Uri, DisplayTitle),
 	image_url(Uri, ImageLink),
+	image_uri(Uri, ImageUri),
 	Metadata = metadata{title:DisplayTitle,
 						image:ImageLink,
+						image_uri:ImageUri,
 						properties:Properties}.
 metadata(thumbnail, Uri, EnrichedItem) :-
     thumbnail_url(Uri, ThumbnailUrl),
@@ -215,6 +217,16 @@ image_link(Image, ThumbUrl) :-
 	concat('cache/original?uri=', Image, RequestUrl),
     http_absolute_location(root(RequestUrl), ThumbUrl, []).
 
+%%	image_uri(+Uri, -ImageUri)
+%
+%	Get the 'original' uri of an image, not a link to a cached one.
+image_uri(Uri, ImageUri) :-
+	rdf(Aggregation, edm:aggregatedCHO, Uri),
+	rdf(Aggregation, edm:isShownBy, ImageUri), !.
+image_uri(Uri, ImageUri) :-
+	rdf(Aggregation, edm:aggregatedCHO, Uri),
+	rdf(Aggregation, edm:hasView, ImageUri), !.
+
 %%	thumbnail_url(+Uri, -ThumbUrl)
 %
 %	* Check if image is present, if so, return request url.
diff --git a/web/js/accurator_item.js b/web/js/accurator_item.js
index 33379e4..771d0d0 100644
--- a/web/js/accurator_item.js
+++ b/web/js/accurator_item.js
@@ -2,7 +2,6 @@
 Accurator Item
 Code for extending functionality item page.
 *******************************************************************************/
-"use_strict";
 var query, locale, experiment, domain, user, ui, annotation_ui, uri;
 var vntFirstTitle, vntFirstText;
 var annotoriousFields;
@@ -75,12 +74,11 @@ function initImage() {
 		// Set id image
 		var id = "itemImg" + generateIdFromUri(uri);
 		$(".itemImg").attr("id", id);
-
 		// Set location image
 		$(".itemImg").attr("src", metadata.image);
 
 		// Add annotation fields for image
-		annotationFields(id);
+		annotationFields(id, metadata.image_uri);
 	});
 }
 
@@ -143,7 +141,7 @@ function addNavigationButtonEvents() {
 	}
 }
 
-function annotationFields(imageId) {
+function annotationFields(imageId, targetImage) {
 	// Retrieve the fields that should be added (based on save_user_info)
 	$.getJSON("annotation_fields",
 			  {locale:locale,
@@ -160,8 +158,12 @@ function annotationFields(imageId) {
 		// Add fields to hidden dom elements for annotorious
 		for(var i=0; i<fields.fragment_fields.length; i++) {
 			// Create new field object
-			var fld = fields.fragment_fields[i];
-			var field = new Field(fld.type, fld.label, fld.comment, fld.uri, fld.source);
+			var field = new Field(
+				fields.fragment_fields[i],
+				uri,
+				targetImage,
+				user
+			);
 			$("#itemDivAnnotoriousFields").append(field.node);
 		}
 		// annotorious fields are added in deniche init
diff --git a/web/js/field.js b/web/js/field.js
index 71f37d5..6323e43 100644
--- a/web/js/field.js
+++ b/web/js/field.js
@@ -1,19 +1,24 @@
 /*******************************************************************************
 Field
 Class of annotation fields. Fields can be of different types, such as dropdown,
-radiobuttons and textfields.
+radiobuttons and textfields. Part of the code comes from annotate.js written by
+Jacco van Ossenbruggen
 *******************************************************************************/
 
-function Field(type, label, comment, uri, source) {
-	this.type = type;
-	this.label = label;
-	this.comment = comment;
-	this.uri = uri;
-	this.source = source;
-	this.id = generateIdFromUri(uri);
-	this.node;
-	this.alternatives;
-	switch (type) {
+function Field(defenition, target, targetImage, user) {
+	this.field = defenition.uri; // URI identifying annotation field
+	this.type = defenition.type; // type of input field (e.g. dropdown or radiobutton)
+	this.label = defenition.label; // name of the field
+	this.comment = defenition.comment; // short description of the field
+	this.source = defenition.source; // source of the alternatives shown
+	this.id = generateIdFromUri(defenition.uri); // id of the field useable by jquery
+	this.node = null; // html node representing the field
+	this.alternatives = null; // list of alternatives for dropdown
+	this.target = target; // URI of target to be annotated
+	this.targetImage = null; // URI of target's image to be annotated
+	this.user = user; // URI of the user currently annotating
+
+	switch (defenition.type) {
 		case "DropdownField":
 			this.initDropdown();
 			break;
@@ -32,12 +37,16 @@ Field.prototype.initDropdown = function() {
 }
 
 Field.prototype.addDropdownListeners = function() {
+	var _field = this; //make sure we can use this Field in $ scope
 	var dropId = '#itemInp' + this.id;
 
 	// Eventlistener for selecting typeahead alternative
 	$(dropId).on('typeahead:select', function(event, annotation) {
-		console.log(event);
 		console.log("SAVE: resource EVENT: typeahead:select ANNOTATION: ", annotation);
+		// Submit the resource
+		_field.submitAnnotation(target, body, label, id);
+		// Code for clearing query
+		//$('input.typeahead').typeahead('setQuery', '');
 	});
 
 	// Action upon pressing enter
@@ -51,6 +60,37 @@ Field.prototype.addDropdownListeners = function() {
 	});
 }
 
+Field.prototype.submitAnnotation = function(target, body, label, id, graph) {
+	console.log("Should be submitting", target, body, label, id, graph);
+	if (!graph)
+		graph = target;
+
+	var targetJson = JSON.stringify([{'@id':target}]);
+	var bodyJson = JSON.stringify({'@id':body});
+	var field = "page type";
+
+	$.ajax({type: "POST",
+			url: "api/annotation/add",
+			data: {hasTarget:targetJson,
+				   hasBody:bodyJson,
+			   	   graph:graph,
+			   	   field:field},
+			success: function(){
+				//Add label indicating in the UI what has been added
+				// $("#itemDivAnnotations").append(
+				// 	$.el.span({'id':'itemLblSelected' + id,
+				// 			   'class':"label label-danger"},
+				// 				label
+				// 				//Leave out the remove button for now
+				// 				//$.el.span({'class':"glyphicon glyphicon-remove", 'font-size':"1.5em"})
+				// 				//'onClick':removeAnnotation($('#itemLblSelected' + id))})
+				// 			),
+				// 	"&nbsp;"
+				// 	);
+			}
+	});
+}
+
 Field.prototype.getAllAlternatives = function() {
 	// Get autocomplete alternatives
 	var filter = JSON.stringify({scheme:"http://accurator.nl/bible#BiblicalFigureConceptScheme"});
@@ -101,8 +141,7 @@ Field.prototype.addTypeAhead = function(alternatives) {
 	});
 
 	// Create the suggestion template
-	var suggestionTemplate = function(data){
-		console.log(data);
+	var suggestionTemplate = function(data) {
 		return '<div>' + data.value + ' - <small>' + data.uri + '</small></div>';
 	}
 
@@ -131,3 +170,121 @@ Field.prototype.dropdownField = function() {
 							'placeholder':this.comment})
 	);
 }
+
+
+// function annotationField(field) {
+// 	switch (field.type) {
+// 		case "DropdownField":
+// 			var field = dropdownField(id, label, comment);
+// 			addAutocompleteDropdown(id, field);
+// 			return field;
+// 		case "TextField":
+// 			return textField(id, label, comment);
+// 		case "RadioButtonField":
+// 			return radioButtonField(id, label, comment, field.source);
+// 		case "CheckboxField":
+// 			return checkBoxField(id, label, comment, field.source);
+// 		case "SelectField":
+// 			return selectField(id, label, comment, field.source);
+// 	}
+// }
+
+// function dropdownField(id, label, comment) {
+// 	return	$.el.div({'class':'form-group'},
+// 				$.el.label({'class':'itemLbl',
+// 							'for':'itemInp' + id,
+// 							'id':'itemLbl' + id},
+// 						   label),
+// 				$.el.input({'type':'text',
+// 							'class':'form-control typeahead',
+// 							'id':'itemInp' + id,
+// 							'placeholder':comment})
+// 	);
+// }
+
+// function selectField(id, label, comment, source) {
+// 	return	$.el.div({'class':'form-group'},
+// 				$.el.label({'class':'itemLbl',
+// 							'for':'itemInp' + id,
+// 							'id':'itemLbl' + id},
+// 						   label),
+// 				$.el.select({'class':'form-control',
+// 							 'id':'itemSlt' + id,
+// 							 'placeholder':comment},
+// 						 	 options(source, id))
+// 	);
+// }
+//
+// function options(source, fieldId) {
+// 	var options = [];
+// 	var id = "itemOpt" + fieldId;
+//
+// 	for(var i=0; i<source.length; i++)
+// 		options[i] = $.el.option(source[i]);
+// 	return options;
+// }
+//
+//
+//
+//
+//
+// function textField(id, label, comment) {
+// 	return	$.el.div({'class':'form-group'},
+// 				$.el.label({'class':'itemLbl',
+// 							'for':'itemInp' + id,
+// 							'id':'itemLbl' + id},
+// 						   label),
+// 				$.el.textarea({'type':'text',
+// 							   'class':'form-control',
+// 							   'id':'itemInp' + id,
+// 							   'rows':'2',
+// 							   'placeholder':comment})
+// 	);
+// }
+//
+// function radioButtonField(id, label, comment, source) {
+// 	return	$.el.div({'class':'form-group'},
+// 				$.el.label({'class':'itemLbl',
+// 							'for':'itemInp' + id,
+// 							'id':'itemLbl' + id},
+// 						   label),
+// 				buttons(source, id, "radio")
+// 	);
+// }
+//
+// function checkBoxField(id, label, comment, source) {
+// 	return	$.el.div({'class':'form-group'},
+// 				$.el.label({'class':'itemLbl',
+// 							'for':'itemInp' + id,
+// 							'id':'itemLbl' + id},
+// 						   label),
+// 				buttons(source, id, "checkbox")
+// 	);
+// }
+//
+// function buttons(source, fieldId, type) {
+// 	var buttons = [];
+// 	var id = "";
+//
+// 	if(type === "radio") {
+// 		id = "itemRbtn" + fieldId;
+// 	} else if(type === "checkbox") {
+// 		id = "itemChk" + fieldId;
+// 	}
+// 	var name = id + "options";
+//
+// 	for(var i=0; i<source.length; i++){
+// 		buttons[i] =
+// 		$.el.label({'class':type + '-inline'},
+// 			$.el.input({'type':type,
+// 						'id':id + i,
+// 						'value':source[i]}
+// 			),
+// 			source[i]
+// 		);
+// 		// Add name attribute if type radio
+// 		if(type === "radio")
+// 			$(buttons[i]).find("input").attr("name", name);
+// 	}
+// 	return buttons;
+// }