From f12db1467967cda783602415db96c4d0936f58fa Mon Sep 17 00:00:00 2001
From: vermeul <swen@ethz.ch>
Date: Wed, 6 Feb 2019 16:19:51 +0100
Subject: [PATCH] first version without jQuery
---
jupyter-openbis-extension/static/dialog.js | 450 +++++++++++++--------
1 file changed, 287 insertions(+), 163 deletions(-)
diff --git a/jupyter-openbis-extension/static/dialog.js b/jupyter-openbis-extension/static/dialog.js
index 79ef32e..a64f341 100644
--- a/jupyter-openbis-extension/static/dialog.js
+++ b/jupyter-openbis-extension/static/dialog.js
@@ -9,120 +9,159 @@ define([
var selectedPermId = null
var currentSampleIdentifier = null
var currentDownloadPath = null
+ var ds_type = document.createElement("SELECT")
+ ds_type.className = "select-xs"
+ ds_type.id = "dataset_type"
function show_available_connections (data, conn_table) {
if (!currentDownloadPath) {
currentDownloadPath = data.cwd
}
- var table = $('<table>').addClass('table-bordered table-striped table-condensed')
- var thead = $('<thead>')
- var title_row = $('<tr>')
- .append($('<th>')
- .text('')
- )
- .append($('<th>')
- .text('Name')
- )
- .append($('<th>')
- .text('URL')
- )
- .append($('<th>')
- .text('Status')
- )
- title_row.appendTo(thead)
- thead.appendTo(table)
+ var table = document.createElement("TABLE")
+ table.className = 'table-bordered table-striped table-condensed'
+ var thead = table.createTHead()
+ var thead_row = thead.insertRow(0)
+ var titles = ['', 'Name', 'URL', 'Status']
+ titles.forEach( function(item, index) {
+ thead_row.insertCell().textContent = item
+ })
+ tbody = table.createTBody()
data.connections.forEach( function(item, index, arr) {
- var conn = $('<input type="radio" name="connection_name">')
- .attr("value", item.name)
- .attr("url", item.url)
- conn.change( function() {
+ //console.log(item)
+ var conn = document.createElement("INPUT")
+ conn.type = "radio"
+ conn.name = "connection_name"
+ conn.value = item.name
+ conn.setAttribute("url", item.url)
+
+ // Change the list of available dataset types
+ conn.onchange = function() {
currentConnection = item.name
- })
+ //ds_type.children().remove()
+ while (ds_type.firstChild) {
+ ds_type.removeChild(ds_type.firstChild);
+ }
+ if (item.ds_types != null) {
+ for (ds_type in item.ds_types) {
+ option = document.createElement("OPTION")
+ option.textContent = ds_type.code
+ }
+ }
+ }
if (item.name === currentConnection) {
- conn.prop('checked', true)
+ conn.checked = true
}
else {
- conn.prop('checked', false)
+ conn.checked = false
}
- var row = $('<tr>')
- .append(
- $('<td>').append(conn)
- )
- .append($('<td>')
- .text(item.name)
- )
- .append($('<td>')
- .text(item.url)
- )
- .append($('<td>')
- .text(item.status)
- )
-
- table.append(row)
+
+ var row = tbody.insertRow()
+ row.insertCell().appendChild(conn)
+ row.insertCell().textContent = item.name
+ row.insertCell().textContent = item.url
+ row.insertCell().textContent = item.status
})
- conn_table.empty().append($('<strong>').text('Please choose a connection')).append(table)
+ conn_table.innerHTML = ""
+ table_title = document.createElement("STRONG")
+ table_title.textContent = "Please choose a connection"
+ conn_table.appendChild(table_title)
+ conn_table.appendChild(table)
}
function show_datasets_table( data, datasets_table) {
- var table = $('<table>').addClass('table-bordered table-striped table-condensed text-nowrap')
- var thead = $('<thead>')
- var title_row = $('<tr>')
- .append($('<th>')
- .text('permId')
- )
- .append($('<th>')
- .text('Type')
- )
- .append($('<th>')
- .text('Experiment')
- )
- .append($('<th>')
- .text('Registration Date')
- )
- .append($('<th>')
- .text('Status')
- )
- .append($('<th>')
- .text('Size')
- )
- title_row.appendTo(thead)
- thead.appendTo(table)
+ var table = document.createElement("TABLE")
+ var thead = table.createTHead()
+ var t_row = thead.insertRow()
+ var titles = ['permId', 'Type', 'Experiment', 'Registration Date', 'Status', 'Size']
+ titles.forEach( function(title) {
+ t_row.insertCell().textContent = title
+ })
+
+ //var table = $('<table>').addClass('table-bordered table-striped table-condensed text-nowrap')
+ //var thead = $('<thead>')
+ //var title_row = $('<tr>')
+ // .append($('<th>')
+ // .text('permId')
+ // )
+ // .append($('<th>')
+ // .text('Type')
+ // )
+ // .append($('<th>')
+ // .text('Experiment')
+ // )
+ // .append($('<th>')
+ // .text('Registration Date')
+ // )
+ // .append($('<th>')
+ // .text('Status')
+ // )
+ // .append($('<th>')
+ // .text('Size')
+ // )
+ //title_row.appendTo(thead)
+ //thead.appendTo(table)
data.dataSets.forEach( function(item, index, arr) {
- var permId = $('<input type="radio" name="permId">').attr("value", item.permId)
- permId.change(function() {
- if ($(this).is(':checked')) {
+ var permId = document.createElement("INPUT")
+ permId.type = "radio"
+ permId.name = "permId"
+ permId.value = item.permId
+
+ //var permId = $('<input type="radio" name="permId">').attr("value", item.permId)
+ permId.onchange = function() {
+ if (this.checked) {
selectedPermId = this.value
}
- })
-
- var row = $('<tr>')
- .append(
- $('<td>').append(permId).append(' ' + item.permId)
- )
- .append($('<td>')
- .text(item.type)
- )
- .append($('<td>')
- .text(item.experiment)
- )
- .append($('<td>')
- .text(item.registrationDate)
- )
- .append($('<td>')
- .text(item.status)
- )
- .append($('<td>')
- .text(item.size)
- )
- table.append(row)
+ }
+ //permId.change(function() {
+ // if ($(this).is(':checked')) {
+ // selectedPermId = this.value
+ // }
+ //})
+
+ var tbody = table.createTBody()
+ var row = tbody.insertRow()
+ row.insertCell().appendChild(permId)
+ row.insertCell().textContent = item.type
+ row.insertCell().textContent = item.experiment
+ row.insertCell().textContent = item.registrationDate
+ row.insertCell().textContent = item.status
+ row.insertCell().textContent = item.size
+
+ //var row = $('<tr>')
+ // .append(
+ // $('<td>').append(permId).append(' ' + item.permId)
+ // )
+ // .append($('<td>')
+ // .text(item.type)
+ // )
+ // .append($('<td>')
+ // .text(item.experiment)
+ // )
+ // .append($('<td>')
+ // .text(item.registrationDate)
+ // )
+ // .append($('<td>')
+ // .text(item.status)
+ // )
+ // .append($('<td>')
+ // .text(item.size)
+ // )
+ //table.append(row)
})
- datasets_table.empty().append(table)
+ while (datasets_table.firstChild) {
+ datasets_table.removeChild(datasets_table.firstChild);
+ }
+ datasets_table.appendChild(table)
+
+ //datasets_table.innerHTML = ''
+ //datasets_table.innerHTML = table
+ //datasets_table.empty().append(table)
}
@@ -143,7 +182,9 @@ define([
icon: 'fa-download',
help_index: '',
handler: function (env) {
- var conn_table = $('<div id="openbis_connections"/>')
+ //var conn_table = $('<div id="openbis_connections"/>')
+ var conn_table = document.createElement("DIV")
+ conn_table.id = "openbis_connections"
getOpenBisConnections(env, conn_table)
.done(function (data) {
show_available_connections(data, conn_table)
@@ -160,72 +201,120 @@ define([
// to make sure we can display the download path provided by the server.
// show DataSets for Sample identifier/permid
- var sample = $("<div>")
- sample.append($('<strong>').text('Sample identfier/permId: '))
- sample.css('margin-top', '10px')
- var sampleIdentifier = $('<input type="text" name="sampleIdentifier" size=40 placeholder="sample identifier">')
- .val(currentSampleIdentifier)
- var show_datasets_btn = $('<button type="button" class="btn-info btn-xs">show datasets</button>')
- var datasets_table = $('<div id="dataset_table">')
- .addClass("output output_scroll")
- .css('max-height', '10em')
- show_datasets_btn.click(function () {
- var connection_name = $('input[name="connection_name"]:checked').val()
- currentConnection = connection_name
- currentSampleIdentifier = sampleIdentifier.val()
- if (!connection_name) {
+ var sample = document.createElement("DIV")
+ var title = document.createElement("STRONG")
+ title.textContent = "Sample identfier/permId: "
+ sample.appendChild(title)
+ sample.style.marginTop = '10px'
+
+ var sampleIdentifier = document.createElement("INPUT")
+ sampleIdentifier.type = "text"
+ sampleIdentifier.name = "sampleIdentifier"
+ sampleIdentifier.size = 40
+ sampleIdentifier.placeholder = "sample identifier or permId"
+ sampleIdentifier.value = currentSampleIdentifier
+
+ var datasets_table = document.createElement("DIV")
+ datasets_table.id = "dataset_table"
+ datasets_table.className = "output output_scroll"
+ datasets_table.style.maxHeight = "10em"
+
+ var show_datasets_btn = document.createElement("BUTTON")
+ show_datasets_btn.className = "btn-info btn-xs"
+ show_datasets_btn.textContent = "show datasets"
+
+ show_datasets_btn.onclick = function() {
+ var selected_conn = document.querySelector('input[name=connection_name]:checked')
+ if (!selected_conn) {
alert('Please choose a connection')
return false
}
+ connection_name = selected_conn.value
+
+ currentConnection = connection_name
+ currentSampleIdentifier = sampleIdentifier.value
if (!currentSampleIdentifier) {
alert('Please specify a sample identifier/permId')
return false
}
- var settings = {
- url: env.notebook.base_url + 'openbis/sample/' + connection_name + '/' + encodeURIComponent(currentSampleIdentifier),
- processData: false,
- type: 'GET',
- dataType: 'json',
- contentType: 'application/json'
- }
-
- utils.ajax(settings)
- .done(function(data) {
+ //var settings = {
+ // url: env.notebook.base_url + 'openbis/sample/' + connection_name + '/' + encodeURIComponent(currentSampleIdentifier),
+ // processData: false,
+ // type: 'GET',
+ // dataType: 'json',
+ // contentType: 'application/json'
+ //}
+ var url = env.notebook.base_url + 'openbis/sample/' + connection_name + '/' + encodeURIComponent(currentSampleIdentifier)
+
+ var xhttp = new XMLHttpRequest()
+ xhttp.onreadystatechange = function() {
+ var data = JSON.parse(this.responseText)
+ //if (this.readyState == 4 && this.status == 200) {
+ if (this.status == 200) {
show_datasets_table(data, datasets_table)
- })
- .fail(function(data) {
- alert('Error:' + data.statusText)
- })
-
- })
- sample.append(sampleIdentifier).append(show_datasets_btn).append(datasets_table)
+ }
+ else {
+ alert("Error:" + data.statusText)
+ }
+ };
+ xhttp.open("GET", url, true);
+ xhttp.send();
+
+ //utils.ajax(settings)
+ // .done(function(data) {
+ // show_datasets_table(data, datasets_table)
+ // })
+ // .fail(function(data) {
+ // alert('Error:' + data.statusText)
+ // })
+ }
+ sample.appendChild(sampleIdentifier)
+ sample.appendChild(show_datasets_btn)
+ //sample.appendChild(datasets_table)
// dataSetPermId only
- var dataset = $('<p>')
- .css('margin-top', '10px')
- .append($('<b>').text('... or enter DataSet permId directly: '))
- var datasetPermId = $('<input type="text" name="datasetPermId" size=40 placeholder="dataset permId">')
- dataset.append(datasetPermId)
-
- // download path
- var downloadPath =$('<input type="text" name="downloadPath" size=100>')
- .val(currentDownloadPath)
- var path = $('<div>')
- .append($('<strong>').text('download data to path: '))
- .append(downloadPath)
-
- var download_dialog_box = $('<div/>')
- download_dialog_box.append(conn_table).append(sample).append(dataset).append(path)
-
- function downloadDataset(permId, path) {
+ var dataset_direct = document.createElement("P")
+ dataset_direct.style.marginTop='10px'
+ dataset_direct.innerHTML = '<strong>enter DataSet permId directly: </strong>'
+
+ //var dataset = $('<p>')
+ // .css('margin-top', '10px')
+ // .append($('<b>').text('... or enter DataSet permId directly: '))
+ var datasetPermId = document.createElement("INPUT")
+ datasetPermId.type = "text"
+ datasetPermId.name = "datasetPermId"
+ datasetPermId.size = "40"
+ datasetPermId.placeholder = "dataSet permId"
+
+ dataset_direct.appendChild(datasetPermId)
+
+ var downloadPath = document.createElement("INPUT")
+ downloadPath.type = "text"
+ downloadPath.name = "downloadPath"
+ downloadPath.size = "90"
+ downloadPath.value = currentDownloadPath
+
+ var path = document.createElement("DIV")
+ path.innerHTML = "<strong>download data to path: </strong>"
+ path.appendChild(downloadPath)
+
+ var download_dialog_box = document.createElement("DIV")
+ download_dialog_box.appendChild(conn_table)
+ download_dialog_box.appendChild(dataset_direct)
+ download_dialog_box.appendChild(path)
+
+ function downloadDataset(selected_conn, permId, path) {
var notebook = IPython.notebook
- var connection_name = $('input[name="connection_name"]:checked').val()
- var connection_url = $('input[name="connection_name"]:checked').attr('url')
+ var connection_name = selected_conn.value()
+ var connection_url = selected_conn.getAttribute("url")
+ //var connection_name = $('input[name="connection_name"]:checked').val()
+ //var connection_url = $('input[name="connection_name"]:checked').attr('url')
var downloadUrl = env.notebook.base_url + 'openbis/dataset/'
+ connection_name + '/' + permId + '/' + encodeURIComponent(path)
// get the canvas for user feedback
- var container = $('#notebook-container')
+ //var container = $('#notebook-container')
+ var container = document.getElementById('notebook-container')
var settings = {
url: downloadUrl,
@@ -235,18 +324,42 @@ define([
contentType: 'application/json'
}
+ var close = document.createElement("BUTTON")
+ close.className = "close"
+ close.setAttribute("data-dismiss", "alert")
+ close.setAttribute("aria-label", "Close")
+
+ var x = document.createElement("SPAN")
+ x.setAttribute("aria-hidden", true)
+ x.textContent = "×"
+
+ // remove existing feedbacks
+ for (element in document.getElementsByClassName("openbis-feedback")) {
+ element.remove()
+ }
+
// download the dataset files
utils.ajax(settings)
.done(function (data) {
// display feedback to user
- var feedback = '<div class="openbis-feedback alert alert-success alert-dismissible" role="alert">' +
- '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
- '<span aria-hidden="true">×</span></button>' +
- data.statusText +
- '</div>'
+ var feedback = document.createElement( "DIV" )
+ feedback.className = "openbis-feedback alert alert-success alert-dismissible"
+ feedback.setAttribute("role","alert")
+ feedback.append(data.statusText)
+
+ close.appendChild(x)
+ feedback.appendChild(close)
+
+
+ //var feedback = '<div class="openbis-feedback alert alert-success alert-dismissible" role="alert">' +
+ // '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
+ // '<span aria-hidden="true">×</span></button>' +
+ // data.statusText +
+ // '</div>'
// display feedback
- $('.openbis-feedback').remove()
+ //$('.openbis-feedback').remove()
+
container.prepend(feedback)
// write statusText from returned data to notebooks metadata
@@ -271,21 +384,29 @@ define([
})
.fail(function (data) {
// display feedback to user
- var feedback =
- '<div class="openbis-feedback alert alert-danger alert-dismissible" role="alert">' +
- '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' +
- '<strong>Error: </strong>Dataset was not downloaded.<div>' + data.statusText + '</div></div>'
-
- // display feedback
- $('.openbis-feedback').remove()
+ var feedback = document.createElement( "DIV" )
+ feedback.className = "openbis-feedback alert alert-danger alert-dismissible"
+ feedback.setAttribute("role","alert")
+ feedback.innerHTML = "<strong>Error: </strong>Dataset was not downloaded.<div>"
+ + data.statusText
+ + "</div>"
+
+ //var feedback =
+ // '<div class="openbis-feedback alert alert-danger alert-dismissible" role="alert">' +
+ // '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>' +
+ // '<strong>Error: </strong>Dataset was not downloaded.<div>' + data.statusText + '</div></div>'
+
+ close.appendChild(x)
+ feedback.appendChild(close)
container.prepend(feedback)
})
}
function onDownloadClick() {
- connection_name = $('input[name="connection_name"]:checked').val()
- if (typeof connection_name === "undefined") {
- alert('please choose a connection')
+ var selected_conn = document.querySelector('input[name=connection_name]:checked')
+ //connection_name = $('input[name="connection_name"]:checked').val()
+ if (! selected_conn) {
+ alert('Please choose a connection')
return false
}
@@ -297,7 +418,9 @@ define([
alert('please select a dataset or provide a permId')
return false
}
- downloadDataset(selectedPermId, downloadPath.val())
+
+ if (!downloadPath.value)
+ downloadDataset(selected_conn, selectedPermId, downloadPath.val())
}
dialog.modal({
@@ -322,7 +445,8 @@ define([
icon: 'fa-cloud-upload',
help_index: '',
handler: function (env) {
- var conn_table = $('<div id="openbis_connections"/>')
+ var conn_table = document.createElement("DIV")
+ conn_table.id = "openbis_connections"
getOpenBisConnections(env, conn_table)
.done(function (data) {
show_available_connections(data, conn_table)
@@ -332,17 +456,17 @@ define([
})
var ds_name = $('<input type="text" name="ds_name" size=40 placeholder="name">')
var ds_description = $('<input type="text" name="ds_description" size=40 placeholder="description">')
- var ds_type = $('<input type="text" name="ds_type" size=40 placeholder="type">')
+ //var ds_type = $('<input type="text" name="ds_type" size=40 placeholder="type">')
+ //var ds_type = $('<select class="form-control select-xs" id="dataset_type">')
var sampleIdentifier = $('<input type="text" name="sampleIdentifier" size=40 placeholder="sample identifier">')
.val(currentSampleIdentifier)
var ds_files = $('<input type="text" name="files" size=40 placeholder="filenames">')
-
var inputs = $('<div>')
.css('margin-top', '10px')
.append($('<p>').text('Name: ').append(ds_name))
.append($('<p>').text('Description: ').append(ds_description))
- .append($('<p>').text('Type: ').append(ds_type))
+ .append($('<p>').text('DatasetType: ').append(ds_type))
.append($('<p>').text('Sample: ').append(sampleIdentifier))
.append($('<p>').text('Files: ').append(ds_files))
@@ -371,7 +495,7 @@ define([
"files" : files,
"sampleIdentifier": sampleIdentifier.val()
}
- console.log(dataSetInfo);
+ //console.log(dataSetInfo);
var settings = {
url: uploadUrl,
--
GitLab