Skip to content

GitLab

Commit 73d1e053 authored by Piotr Gawron's avatar Piotr Gawron
Browse files

AbstractPanel extracted for use of other panels

parent 72d73186
Hide whitespace changes
Inline Side-by-side
frontend-js/src/main/js/gui/AbstractPanel.js 0 → 100644
View file @ 73d1e053
"use strict";
/* exported logger */
var Promise = require("bluebird");
var Alias = require('../map/data/Alias');
var GuiConnector= require('../GuiConnector');
var ObjectWithListeners = require('../ObjectWithListeners');
var Reaction = require('../map/data/Reaction');
var logger = require('../logger');
function AbstractPanel(params) {
ObjectWithListeners.call(this, params);
var self = this;
this.setElement(params.element);
this.setMap(params.customMap);
this.setOverlayDb (self.getMap().getOverlayByName(params.panelName));
var searchByQuery = function(){
return self.searchByQuery();
};
self.getSearchButton().onclick = searchByQuery;
self.getSearchInput().onkeypress = function(event){
if (event.keyCode === 13) {
searchByQuery();
}
};
$(self.getSearchInput()).typeahead({
minLength: 1,
},{
source: function(query, callback){
callback(self.getAutocomplete(query));
}
});
$(self.getSearchInput()).on('typeahead:select', function() {
searchByQuery();
});
self.getOverlayDb().addListener("onSearch", function() {
return self.refreshSearchResults();
});
this._tabIdCount = 0;
}
AbstractPanel.prototype = Object.create(ObjectWithListeners.prototype);
AbstractPanel.prototype.constructor = AbstractPanel;
AbstractPanel.prototype.setOverlayDb = function(overlayDb){
if (overlayDb === undefined) {
throw new Error("Undefined overlayDb");
}
this._overlayDb = overlayDb;
};
AbstractPanel.prototype.getOverlayDb = function(){
return this._overlayDb;
};
AbstractPanel.prototype. createLabel=function(value) {
var result = document.createElement("span");
result.innerHTML = value;
result.className = "searchDescriptionLabel";
return result;
}
AbstractPanel.prototype.createPostTranslationalModifications = function(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
throw new Error("Not implemented");
}
return result;
}
AbstractPanel.prototype.createCandidates=function(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
throw new Error("Not implemented");
}
return result;
}
AbstractPanel.prototype.createChebiTree=function(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
throw new Error("Not implemented");
}
return result;
}
AbstractPanel.prototype.createSeparator=function() {
var result = document.createElement("hr");
return result;
}
AbstractPanel.prototype.createNewLine=function(count) {
var result = document.createElement("p");
if (count > 0) {
result.style.height = ((count-1) * 10) + "px";
}
return result;
}
AbstractPanel.prototype.createAnnotations=function(label, value) {
var result = document.createElement("div");
if (value !== undefined && value.length > 0) {
var self = this;
result.appendChild(self.createLabel("Annotations: "));
result.appendChild(self.createNewLine());
for (var i = 0; i < value.length; i++) {
var element = value[i];
var row = document.createElement("div");
row.style.height = "24px";
if (i % 2 === 0) {
row.className = "annotationRowOdd";
} else {
row.className = "annotationRowEven";
}
var header = document.createElement("div");
header.style.width = "24px";
header.style.float = "left";
header.innerHTML = "[" + (i + 1) + "]";
row.appendChild(header);
var body = document.createElement("div");
body.style.float = "left";
var link = document.createElement("a");
link.href = element.link;
link.innerHTML = element.type + " (" + element.name + ")";
body.appendChild(link);
row.appendChild(body);
result.appendChild(row);
}
}
return result;
}
AbstractPanel.prototype.setMap = function(map) {
this._map = map;
};
AbstractPanel.prototype.getMap = function() {
return this._map;
};
AbstractPanel.prototype.setElement = function(element) {
if (element === undefined) {
throw new Error("DOM Element must be defined");
}
this._element = element;
if (this.getNavElement() === undefined) {
throw new Error("No nav-tabs div found in the search panel element");
}
if (this.getContentElement() === undefined) {
throw new Error("No tab-content div found in the search panel element");
}
if (this.getSearchButton() === undefined) {
throw new Error("No searchButton found in the search panel element");
}
if (this.getSearchInput() === undefined) {
throw new Error("No searchInput found in the search panel element");
}
if (this.getSearchPerfectMatch() === undefined) {
throw new Error("No searchPerfectMatch found in the search panel element");
}
};
AbstractPanel.prototype.getSearchQueryElement = function() {
var children = this.getElement().children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.getAttribute("name") === "searchQuery") {
return child;
}
}
};
AbstractPanel.prototype.getSearchResultsElement = function() {
var children = this.getElement().children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.getAttribute("name") === "searchResults") {
return child;
}
}
};
AbstractPanel.prototype.getNavElement = function() {
var searchResultsElement = this.getSearchResultsElement();
if (searchResultsElement) {
var children = searchResultsElement.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.className.indexOf("nav-tabs") !== -1) {
return child;
}
}
}
};
AbstractPanel.prototype.getElementByName = function(element, name) {
if (element!==undefined) {
if (element.getAttribute("name") === name) {
return element;
}
var children = element.children;
for (var i=0;i<children.length;i++) {
var child = children[i];
var res = this.getElementByName(child, name);
if (res!==undefined) {
return res;
}
}
}
return undefined;
}
AbstractPanel.prototype.getSearchButton = function() {
return this.getElementByName(this.getSearchQueryElement(),"searchButton");
};
AbstractPanel.prototype.getSearchInput = function() {
return this.getElementByName(this.getSearchQueryElement(),"searchInput");
};
AbstractPanel.prototype.getContentElement = function() {
var searchResultsElement = this.getSearchResultsElement();
if (searchResultsElement) {
var children = searchResultsElement.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.className.indexOf("tab-content") !== -1) {
return child;
}
}
}
};
AbstractPanel.prototype.getElement = function() {
return this._element;
};
AbstractPanel.prototype.clearResults = function() {
var navElement = this.getNavElement();
while (navElement.firstChild) {
navElement.removeChild(navElement.firstChild);
}
var contentElement = this.getContentElement();
while (contentElement.firstChild) {
contentElement.removeChild(contentElement.firstChild);
}
};
AbstractPanel.prototype.refreshSearchResults = function() {
var self = this;
self.clearResults();
var searchDb = self.getOverlayDb();
var queries = searchDb.getQueries();
var promises = [];
for (var i = 0; i < queries.length; i++) {
promises.push(searchDb.getElementsByQuery(queries[i]));
}
return new Promise(function(resolve, reject){
return Promise.all(promises).then(function(results) {
for (var i = 0; i < queries.length; i++) {
self.addResultTab(queries[i], results[i]);
}
resolve();
}).catch(reject);
});
};
AbstractPanel.prototype.createLabelText = function(value) {
var result = document.createElement("span");
if (value !== undefined) {
result.innerHTML = value;
}
return result;
};
AbstractPanel.prototype.createParamLine = function(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
var self = this;
result.appendChild(self.createLabel(label));
result.appendChild(self.createLabelText(value));
result.appendChild(self.createNewLine());
}
return result;
};
AbstractPanel.prototype.createIcon = function(icon) {
var result = document.createElement("div");
if (icon !== undefined) {
var img = document.createElement("img");
img.src=GuiConnector.getImgPrefix()+icon;
img.style.float="left";
img.hspace="5";
result.appendChild(img);
}
return result;
};
AbstractPanel.prototype.createArrayParamLine = function(label, value) {
var result = document.createElement("div");
if (value !== undefined && value.length > 0) {
var self = this;
result.appendChild(self.createLabel(label));
result.appendChild(self.createLabelText(value.join(",")));
result.appendChild(self.createNewLine());
}
return result;
};
AbstractPanel.prototype.createSubMapLink = function(label, element) {
var self = this;
var result = document.createElement("div");
if (element !== undefined) {
var button = document.createElement("button");
button.text = element.getModelId();
button.onclick = function() {
return self.getMap().openSubmodel(element.getModelId());
};
result.appendChild(createLabel("Submodel: "));
result.appendChild(button);
}
return result;
};
module.exports = AbstractPanel;
frontend-js/src/main/js/gui/SearchPanel.js
View file @ 73d1e053
......@@ -4,282 +4,28 @@
var Promise = require("bluebird");
var AbstractPanel = require('./AbstractPanel');
var Alias = require('../map/data/Alias');
var GuiConnector= require('../GuiConnector');
var GuiConnector = require('../GuiConnector');
var Reaction = require('../map/data/Reaction');
var logger = require('../logger');
function SearchPanel(params) {
var self = this;
this.setElement(params.element);
this.setMap(params.customMap);
var searchDb = self.getMap().getOverlayByName('search');
var searchByQuery = function(){
var query = self.getSearchInput().value;
var perfect = self.getSearchPerfectMatch().checked;
searchDb.searchByQuery(query, perfect);
};
self.getSearchButton().onclick= searchByQuery;
self.getSearchInput().onkeypress = function(event){
if (event.keyCode === 13) {
searchByQuery();
}
};
$(self.getSearchInput()).typeahead({
minLength: 1,
},{
source: function(query, callback){
callback(self.getMap().getSearchAutocomplete(query));
}
});
$(self.getSearchInput()).on('typeahead:select', function() {
searchByQuery();
});
if (searchDb === undefined) {
throw new Error("Cannot find search db overlay");
}
searchDb.addListener("onSearch", function() {
return self.refreshSearchResults();
});
this._tabIdCount = 0;
}
function createLabel(value) {
var result = document.createElement("span");
result.innerHTML = value;
result.className = "searchDescriptionLabel";
return result;
}
function createPostTranslationalModifications(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
throw new Error("Not implemented");
}
return result;
}
function createCandidates(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
throw new Error("Not implemented");
}
return result;
}
function createChebiTree(label, value) {
var result = document.createElement("div");
if (value !== undefined) {
throw new Error("Not implemented");
}
return result;
}
function createSeparator() {
var result = document.createElement("hr");
return result;
}
function createNewLine(count) {
var result = document.createElement("p");
if (count > 0) {
result.style.height = ((count-1) * 10) + "px";
}
return result;
}
function createAnnotations(label, value) {
var result = document.createElement("div");
if (value !== undefined && value.length > 0) {
result.appendChild(createLabel("Annotations: "));
result.appendChild(createNewLine());
for (var i = 0; i < value.length; i++) {
var element = value[i];
var row = document.createElement("div");
row.style.height = "24px";
if (i % 2 === 0) {
row.className = "annotationRowOdd";
} else {
row.className = "annotationRowEven";
}
var header = document.createElement("div");
header.style.width = "24px";
header.style.float = "left";
header.innerHTML = "[" + (i + 1) + "]";
row.appendChild(header);
var body = document.createElement("div");
body.style.float = "left";
var link = document.createElement("a");
link.href = element.link;
link.innerHTML = element.type + " (" + element.name + ")";
body.appendChild(link);
row.appendChild(body);
result.appendChild(row);
}
}
return result;
}
SearchPanel.prototype.setMap = function(map) {
this._map = map;
};
SearchPanel.prototype.getMap = function() {
return this._map;
};
SearchPanel.prototype.setElement = function(element) {
if (element === undefined) {
throw new Error("DOM Element must be defined");
}
this._element = element;
if (this.getNavElement() === undefined) {
throw new Error("No nav-tabs div found in the search panel element");
}
if (this.getContentElement() === undefined) {
throw new Error("No tab-content div found in the search panel element");
}
if (this.getSearchButton() === undefined) {
throw new Error("No searchButton found in the search panel element");
}
if (this.getSearchInput() === undefined) {
throw new Error("No searchInput found in the search panel element");
}
if (this.getSearchPerfectMatch() === undefined) {
throw new Error("No searchPerfectMatch found in the search panel element");
}
};
SearchPanel.prototype.getSearchQueryElement = function() {
var children = this.getElement().children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.getAttribute("name") === "searchQuery") {
return child;
}
}
};
SearchPanel.prototype.getSearchResultsElement = function() {
var children = this.getElement().children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.getAttribute("name") === "searchResults") {
return child;
}
}
};
SearchPanel.prototype.getNavElement = function() {
var searchResultsElement = this.getSearchResultsElement();
params.panelName = "search";
AbstractPanel.call(this, params);
if (searchResultsElement) {
var children = searchResultsElement.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.className.indexOf("nav-tabs") !== -1) {
return child;
}
}
}
};
function getElementByName(element, name) {
if (element!==undefined) {
if (element.getAttribute("name") === name) {
return element;
}
var children = element.children;
for (var i=0;i<children.length;i++) {
var child = children[i];
var res = getElementByName(child, name);
if (res!==undefined) {
return res;
}
}
}
return undefined;
}
SearchPanel.prototype.getSearchButton = function() {
return getElementByName(this.getSearchQueryElement(),"searchButton");
};
SearchPanel.prototype.getSearchInput = function() {
return getElementByName(this.getSearchQueryElement(),"searchInput");
};
SearchPanel.prototype = Object.create(AbstractPanel.prototype);
SearchPanel.prototype.constructor = SearchPanel;
SearchPanel.prototype.getSearchPerfectMatch = function() {
return getElementByName(this.getSearchQueryElement(),"searchPerfectMatch");
};
SearchPanel.prototype.getContentElement = function() {
var searchResultsElement = this.getSearchResultsElement();
if (searchResultsElement) {
var children = searchResultsElement.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.className.indexOf("tab-content") !== -1) {
return child;
}