Changeset 4631

Timestamp:

Nov 21, 2017, 2:35:09 PM (6 years ago)

Author:

Nicklas Nordborg

Message:

References #1006: External data filtering and mapping wizard

Moving things from Reggie to Relax that makes the wizard interfae work. There is still a lot of functionality that we don't need right now.

Location:

extensions/net.sf.basedb.relax/trunk

Files:

• META-INF/servlets.xml (modified) (1 diff)
• resources/css/filters.svg (added)
• resources/css/relax.css (modified) (1 diff)
• resources/export (added)
• resources/export/map-external-data.js (added)
• resources/export/map-external-data.jsp (added)
• resources/images/download.png (added)
• resources/images/goback.png (added)
• resources/images/gonext.png (added)
• resources/relax.js (modified) (4 diffs)
• src/net/sf/basedb/relax/servlet/ExportServlet.java (added)
• src/net/sf/basedb/relax/servlet/SessionServlet.java (added)

extensions/net.sf.basedb.relax/trunk/META-INF/servlets.xml

@@ -5 +5 @@
     <servlet-class>net.sf.basedb.relax.servlet.InstallServlet</servlet-class>
   </servlet>
+  <servlet>
+    <servlet-name>Session</servlet-name>
+    <servlet-class>net.sf.basedb.relax.servlet.SessionServlet</servlet-class>
+  </servlet>
+  <servlet>
+    <servlet-name>Export</servlet-name>
+    <servlet-class>net.sf.basedb.relax.servlet.ExportServlet</servlet-class>
+  </servlet>
 </servlets>

extensions/net.sf.basedb.relax/trunk/resources/css/relax.css

@@ -27 +27 @@
   display: none;
 }
+
+.wizard
+{
+  margin: 0em;
+  box-sizing: border-box;
+}
+
+.wizard .step
+{
+  position: relative;
+  margin-bottom: 1em;
+  display: none;
+}
+
+.wizard.disabled
+{
+  pointer-events: none;
+}
+
+.wizard.disabled .step, .wizard .step.disabled, .wizard.disabled .step-form
+{
+  filter: url(filters.svg#grayscale); /* Firfox, etc */
+  filter: gray; /* IE */
+  opacity: 0.75;
+}
+
+.wizard .step-no
+{
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 2rem;
+  text-align: center;
+  font-size: 150%;
+  font-weight: bold;
+  padding-top: 2px;
+  color: #FFFFFF;
+  background-color: #224488;
+}
+
+.wizard .step-title
+{
+  margin-left: 2rem;
+  padding: 2px 4px 2px 4px;
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  background-color: #E8E8E8;
+  color: #224488;
+  font-weight: bold;
+}
+
+.wizard .step-title .helpicon
+{
+  margin-left: 1em;
+}
+
+.wizard .step-content
+{
+  margin-left: 2rem;
+  border-bottom-width: 1px;
+}
+
+.wizard .step.disabled .step-no
+{
+  cursor: pointer;
+}
+
+.wizard .step.disabled .step-content
+{
+  pointer-events: none;
+}
+
+.wizard .step.disabled.auto-hide .step-no
+{
+  font-size: 100%;
+}
+
+.wizard .step.disabled.auto-hide .step-content
+{
+  display: none;
+}
+
+
+.wizard .step-form
+{
+  width: 100%;
+  border-collapse: collapse;
+}
+
+
+.wizard .step-form > tbody > tr > td
+{
+  padding: 1px 2px 1px 4px;
+  vertical-align: baseline;
+}
+
+.wizard .step-form > tbody > tr.align-top > td
+{
+  vertical-align: top;
+}
+
+.wizard .step-form > tbody > tr.align-middle > td
+{
+  vertical-align: middle;
+}
+
+.wizard .step-form .prompt
+{
+  width: 18em;
+  min-width: 18em;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.wizard .step-form .subprompt
+{
+  width: 18em;
+  min-width: 18em;
+  text-align: right;
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.wizard .step-form .section-header td:not(.help)
+{
+  background-color: #E8E8E8;
+  white-space: nowrap;
+}
+
+.wizard .step-form .section-header td
+{
+  padding: 3px 2px 3px 4px;
+}
+
+.wizard .step-form .section-header td:first-child
+{
+  font-weight: bold;
+}
+
+.wizard .step-form .section-header td:first-child:before
+{
+  content: '› ';
+  color: #999999;
+}
+
+.wizard .step-form .info-section tr:not(.section-header) td:not(.help)
+{
+  background-color: rgba(232, 232, 232, 0.5);
+}
+
+.wizard .step-form .info-section .prompt
+{
+  font-weight: normal;
+  padding-left: 2em;
+  text-align: left;
+}
+
+.wizard .step-form .info-section .info
+{
+  font-style: italic;
+}
+
+.wizard .step-form .info-section .item-description
+{
+  white-space: pre-wrap;
+  height: 6em;
+  max-height: 6em; 
+  overflow: auto;
+}
+
+.wizard .step-form .input
+{
+  width: 36em;
+}
+
+.wizard .step-form .input select, .wizard .step-form .input input[type="text"], .wizard .step-form .input textarea
+{
+  width: 95%;
+}
+
+.wizard .step-form .status
+{
+  width: 20px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+
+.wizard .step-form .align-top .status
+{
+  background-position: 50% 2px;
+  transform-origin: 50% 10px;
+}
+
+.wizard .step-form .status.invalid
+{
+  background-image: url('../images/error.png');
+}
+
+.wizard.flash-error .step-form  .status.invalid
+{
+  animation: enlarge 1s infinite;
+}
+
+.wizard.flash-error .step-form tr.invalid, .wizard.flash-error .step-form td.invalid
+{
+  animation: flash 1s infinite;
+}
+
+@keyframes flash
+{
+  0% { background-color: inherit; }
+  50% { background-color: #FFCCCC; }
+  100% { background-color: inherit; }
+}
+
+@keyframes enlarge
+{
+  0% { transform: scale(1,1); }
+  50% { transform: scale(2,2); }
+  100% { transform: scale(1,1); }
+}
+
+.wizard .step-form .status.warning
+{
+  background-image: url('../images/warning.png');
+}
+.wizard .step-form .status.valid
+{
+  background-image: url('../images/ok.png');
+}
+
+.wizard .step-form .status.checking
+{
+  background-image: url('../images/loading-small.gif');
+}
+
+.wizard .step-form .status.flag
+{
+  background-image: url('../images/flag.png');
+}
+
+.wizard .step-form .status.new
+{
+  background-image: url('../images/new.png');
+}
+
+.wizard .step-form .help
+{
+  background-color: rgba(208, 208, 208, 0.5);
+  font-style: italic;
+}
+
+.wizard .step-form .help .message
+{
+  color: #C80000;
+  font-weight: bold;
+  padding-right: 6px;
+  display: none;
+}
+
+.wizard .navigation
+{
+  margin-left: 2.5em;
+  margin-top: 1em;
+  margin-bottom: 5em;
+  border-spacing: 4px 0;
+}
+
+.wizard .navigation #gorestart
+{
+  pointer-events: all !important;
+}
+
+.navigation .basicbutton
+{
+  display: none;
+}
+
+.navigation .message
+{
+  color: #CC0000;
+  font-weight: bold;
+  padding-left: 0.5em;
+}
+
+.progress-bar
+{
+  display: none;
+  margin-top: 0.0em;
+  margin-left: 5em;
+  width: 200px;
+  white-space: nowrap;
+}
+
+.progress-bar::after
+{
+  content: attr(value);
+  vertical-align: top;
+  padding-left: 0.5em;
+}
+
+.progress-bar span
+{
+  display: inline-block;
+  height: 1.4em;
+}
+
+.success li
+{
+  background-position: 0 50%;
+  background-repeat: no-repeat;
+  padding-left: 20px;
+  list-style-type: none;
+  line-height: 1.75;
+}
+
+.success li.ok
+{
+  background-image: url('../images/ok.png');
+}
+
+.success li.warning
+{
+  background-image: url('../images/warning.png');
+}
+
+.success li.error
+{
+  background-image: url('../images/error.png');
+  background-color: transparent !important;
+  color: #990000 !important;
+}

extensions/net.sf.basedb.relax/trunk/resources/relax.js

@@ -18 +18 @@
   var numLiveAsyncRequests = 0;
   var hasFatalError = false;
+  var currentStep = 1;
+  var hasSentRegistration = false;
+  var forceConfirm = false;
+  var noConfirmOnFirstStep = true;
   
   /**
@@ -103 +107 @@
     }
   }
+  
+  wizard.isValid = function(element)
+  {
+    return Data.int(element, 'valid', 1);
+  }
+
+  wizard.initFileSelectionField = function(element)
+  {
+    element = Doc.element(element);
+    Events.addEventHandler(element, 'change', wizard.fileChanged);
+    Events.sendChangeEvent(element);
+  }
+  
+  wizard.fileChanged = function(event)
+  {
+    var target = event.currentTarget;
+    
+    var isValid = false;
+    var isWarning = false;
+    
+    // Reset current status
+    wizard.setInputStatus(target);
+    
+    var path = target.value;
+    if (path == '')
+    {
+      // No file, is this an error or a warning?
+      var optional = target.className.indexOf('required') == -1;
+      wizard.setInputStatus(target, optional ? 'warning' : 'invalid', 'Missing');
+      isValid = optional;
+      isWarning = optional;
+    }
+    else
+    {
+      Wizard.setInputStatus(target, 'valid');
+      isValid = true;
+    }
+    
+    Data.set(target, 'valid', isValid ? 1 : 0);
+    Data.set(target, 'warning', isWarning ? 1 : 0);
+    
+    if (!isValid && target.focus) target.focus();
+  }
+  
+  /**
+    Change display status for an input field.
+    @param prefix ID prefix to locate tags
+    @param clazz The message clazz (valid, invalid, warning) or empty
+    @param message The message (may be empty)
+  */
+  wizard.setInputStatus = function(prefix, clazz, message)
+  {
+    if (prefix.id) prefix = prefix.id;
+    
+    var statusTag = Doc.element(prefix + '.status');
+    
+    if (statusTag)
+    {
+      statusTag.className = 'status ' + (clazz || '');
+      var trTag = statusTag.parentNode;
+      var trClass = Data.get(trTag, 'original-class');
+      if (!trClass)
+      {
+        trClass = trTag.className || 'foo';
+        Data.set(trTag, 'original-class', trClass);
+      }
+      trTag.className = trClass + ' ' + (clazz || '');
+    }
+    
+    var msgTag = Doc.element(prefix + '.message');
+    if (msgTag)
+    {
+      if (message)
+      {
+        msgTag.innerHTML = message;
+        Doc.show(msgTag, Data.get(msgTag, 'display', 'inline'));
+      }
+      else
+      {
+        msgTag.innerHTML = message;
+        Doc.hide(msgTag);
+      }
+    }
+    else if (statusTag)
+    {
+      statusTag.title = message || '';
+    }
+  }
+  
+  /**
+    Event handler for input fields, that go to the
+    next wizard step if TAB or ENTER key is pressed.
+    A short delay is used to allow other event handler
+    to run first (eg. for validation).
+  */
+  wizard.goNextOnTabOrEnter = function(event)
+  {
+    if (event.keyCode == 9 || event.keyCode == 13) 
+    {
+      setTimeout(function() { wizard.goNext(true) }, 200);
+    }
+  }
+  
+  /**
+    Event handler for input fields, that go to the
+    next wizard step if TAB key is pressed.
+    A short delay is used to allow other event handler
+    to run first (eg. for validation).
+  */
+  wizard.goNextOnTab = function(event)
+  {
+    if (event.keyCode == 9) 
+    {
+      setTimeout(function() { wizard.goNext(true) }, 200);
+    }
+  }
+
+  /**
+    Event handler for input fields, that changes
+    focus to the next element. The next element
+    should be defined by 'data-next-focus' attribute.
+    It is recommended that this is consisistent with TAB.
+  */
+  wizard.focusOnEnter = function(event)
+  {
+    if (event.keyCode == 13)
+    {
+      var nextFocus = Doc.element(Data.get(event.currentTarget, 'next-focus'));
+      if (nextFocus && nextFocus.focus) nextFocus.focus();
+    }
+  }
+  
+  // Event handler for the 'Next' navigation button
+  wizard.goNextOnClick = function(event)
+  {
+    wizard.goNext(false);
+  }
+  
+  /**
+    Go to the next step in the wizard. This method will first
+    submit 'wizard-validate' event to the current step. If at 
+    least one event handler calls 'Event.preventDefault()' the 
+    processing is aborted. 
+    
+    Otherwise, the current step is disabled and the 'wizard-initialize' 
+    event is sent to the next step. The event handler is responsible
+    for calling 'Wizard.setCurrentStep' to display the next step.
+  */
+  wizard.goNext = function(auto)
+  {
+    var verify = Doc.element('verifyGoNext');
+    if (verify && !verify.checked) return;
+    
+    var details = { 'auto': auto };
+    
+    // Send 'wizard-validate' event to current step
+    var step = Doc.element('step-'+currentStep);
+    var evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent('wizard-validate', true, true, details);
+    if (!step.dispatchEvent(evt)) 
+    {
+      wizard.notifyError();
+      return;
+    }
+  
+    // Hide all navigation buttons and disable form controls in current step
+    internal.hideButtons('navigation');
+    internal.disableStep(step);
+    
+    // Send 'wizard-initialize' to the next step
+    var nextStep = Doc.element('step-'+(currentStep+1));
+    var evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent('wizard-initialize', true, true, details);
+    nextStep.dispatchEvent(evt);
+  }
+  
+  wizard.notifyError = function()
+  {
+    Doc.addClass('wizard', 'flash-error');
+    setTimeout(internal.stopFlashing, 2000);
+  }
+  
+  internal.stopFlashing = function()
+  {
+    Doc.removeClass('wizard', 'flash-error');
+  }
+
+  /**
+    Finalize the registration of the wizard. This method will
+    first submit 'wizard-validate' to the current step. If at 
+    least one event handler calls 'Event.preventDefault()' the 
+    processing is aborted.
+    
+    Otherwise, the current step is disabled and the 'wizard-submit' 
+    event is sent to the 'wizard'. The event handler is responsible
+    for finalizing the registration and displaying a proper
+    message, for example, by calling Wizard.showFinalMessage()
+    
+    The 'data' is passed on to the 'wizard-validate' and 
+    'wizard-submit' events as the Event.details object.
+  */
+  wizard.goRegister = function(data)
+  {
+    // Check if verification is enabled
+    var verify = Doc.element('verifyGoNext');
+    if (verify && !verify.checked) return;
+    
+    // Send 'wizard-validate' event to current step
+    var step = Doc.element('step-'+currentStep);
+    var evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent('wizard-validate', true, true, data);
+    if (!step.dispatchEvent(evt)) 
+    {
+      wizard.notifyError();
+      return;
+    }
+  
+    internal.hideButtons('navigation');
+    internal.disableStep(step);
+    
+    // Send 'wizard-submit' to the next step
+    var wiz = Doc.element('wizard');
+    hasSentRegistration = true;
+    var evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent('wizard-submit', true, true, data);
+    wiz.dispatchEvent(evt);
+  }
+  
+  wizard.setNoConfirmOnFirstStep = function(cf)
+  {
+    noConfirmOnFirstStep = cf;
+  }
+  
+  // Ask the user for confirmation and then restart the wizard
+  wizard.cancelWizard = function()
+  {
+    forceConfirm = true;
+    wizard.restartWizard();
+  }
+  
+  // Restart the wizard without asking the user for confirmation
+  wizard.restartWizard = function()
+  {
+    var url = location.href;
+    if (url.indexOf('&restart=1') == -1) url += '&restart=1';
+    location.href = url;
+  }
+  
+  wizard.setCurrentStep = function(stepNo)
+  {
+    currentStep = stepNo;
+    internal.enableStep(Doc.element('step-'+currentStep));
+  }
+
+  internal.disableStep = function(step)
+  {
+    step = Doc.element(step);
+    internal.disableAllFormElements(step);
+    Doc.addClass(step, 'disabled');
+    Doc.hide('gonext-message');
+    var stepNo = step.getElementsByClassName('step-no')[0];
+    Events.addEventHandler(stepNo, 'click', internal.togglePastStep, {'step-id': step.id});
+    stepNo.title = 'Show/hide this section';
+  }
+  
+  internal.enableStep = function(step)
+  {
+    step = Doc.element(step);
+    Doc.removeClass(step, 'disabled');
+    Doc.show(step);
+  }
+  
+  // Toggle visibility of a past step
+  // The step is hidden if the 'auto-hide' class is present
+  internal.togglePastStep = function(event)
+  {
+    var step = Data.get(event.currentTarget, 'step-id');
+    Doc.addOrRemoveClass(step, 'auto-hide');
+  }
 
   
@@ -156 +439 @@
   {
     wizard.setWizardStatus('loading', msg  || 'Working, please wait...');
-  }
+    if (progress)
+    {
+      var progressBar = Doc.element('wizard-progress');
+      progressBar.classList.add('progress-bar');
+
+      // Get/create child elements
+      var done = Doc.element('wizard-progress-done');
+      if (!done)
+      {
+        done = document.createElement('span');
+        done.id = 'wizard-progress-done';
+        done.className = 'progress-bar-done bg-filled-100 topborder bottomborder leftborder';
+        progressBar.appendChild(done);
+      }
+      var remain = Doc.element('wizard-progress-remain');
+      if (!remain)
+      {
+        remain = document.createElement('span');
+        remain.id = 'wizard-progress-remain';
+        remain.className = 'progress-bar-remain topborder bottomborder rightborder';
+        progressBar.appendChild(remain);
+      }
+        
+      progressBar.setAttribute('value', '0%');
+      done.style.width = '0%';
+      remain.style.width = '100%';
+      Doc.show(progressBar);
+      
+      // Initial request for updating the progress bar
+      progressTimer = setTimeout(internal.requestProgressUpdate, 1500, progress);
+    }
+  }
+  
+  /**
+    Make a request for the progress information. The 'progress'
+    parameter is the name of a progress bar.
+  */
+  internal.requestProgressUpdate = function(progress)
+  {
+    if (hasFatalError) return;
+    var url = '../Session.servlet?ID='+App.getSessionId();
+    url += '&cmd=GetProgress';
+    url += '&name='+encodeURIComponent(progress);
+    
+    var request = Ajax.getXmlHttpRequest();
+    request.open("GET", url, true);
+    Ajax.setReadyStateHandler(request, internal.onProgressReport, internal.onProgressReport);
+    request.send(null);
+  }
+  
+  /**
+    Callback when receiving a progress update.
+  */
+  internal.onProgressReport = function(request)
+  {
+    if (hasFatalError) return;
+    if (debug) App.debug(Strings.encodeTags(request.responseText));
+    var response;
+    var error = false;
+    try
+    {
+      response = JSON.parse(request.responseText);
+      if (response.status != 'ok')
+      {
+        error = response.message || response.stacktrace || 'Unexpected error';
+      }
+    }
+    catch (ex)
+    {
+      error = ex;
+    }
+    
+    if (error)
+    {
+      return;
+    }
+  
+    var progress = response.progress;
+    var progressBar = Doc.element('wizard-progress');
+  
+    if (!progress) 
+    {
+      // Give up if no progress information
+      Doc.hide(progressBar);
+      return;
+    }
+    
+    var done = Doc.element('wizard-progress-done');
+    var remain = Doc.element('wizard-progress-remain');
+  
+    progressBar.setAttribute('value', progress.percent+'%');
+    done.style.width = progress.percent+'%';
+    remain.style.width = (100-progress.percent)+'%';
+    
+    if (progress.message)
+    {
+      Doc.element('wizard-status').innerHTML = Strings.encodeTags(progress.message);
+    }
+    
+    if (progress.percent < 100)
+    {
+      // Continue to request updates until we 100% has been reached
+      progressTimer = setTimeout(internal.requestProgressUpdate, 1500, progress.name);
+    }
+    else
+    {
+      progressTimer = null;
+      Doc.hide(progressBar);
+    }
+  }
+
   
   wizard.showStatusMessage = function(msg)
@@ -172 +565 @@
     Doc.hide('wizard-progress');
   }
-    
+  
+  wizard.showGoNextConfirmation = function(verify, msg)
+  {
+    var check = '';
+    if (verify)
+    {
+      check = '<input type="checkbox" name="verifyGoNext" id="verifyGoNext">';
+      Doc.addClass('gonext', 'disabled');
+      Doc.addClass('goregister', 'disabled');
+    }
+    
+    var gonext = Doc.element('gonext-message');
+    gonext.innerHTML = check + msg;
+    Doc.show(gonext);
+    
+    if (verify)
+    {
+      Events.addEventHandler('verifyGoNext', 'click', internal.verifyInternalOnClick);
+    }
+  }
+  
+  wizard.hideGoNextConfirmation = function()
+  {
+    var gonext = Doc.element('gonext-message');
+    gonext.innerHTML = '';
+    Doc.hide(gonext);
+    Doc.removeClass('gonext', 'disabled');
+    Doc.removeClass('goregister', 'disabled');
+  }
+  
+  internal.verifyInternalOnClick = function(event)
+  {
+    var frm = document.forms['reggie'];
+    var checked = event.currentTarget.checked;
+    Doc.addOrRemoveClass('goregister', 'disabled', !checked);
+    Doc.addOrRemoveClass('gonext', 'disabled', !checked);
+  }
+
+  /**
+    Show final registration messages in a list.
+  */
+  wizard.showFinalMessage = function(messages)
+  {
+    var msg = internal.generateMessageList(messages);
+    wizard.setWizardStatus('success', msg.html);
+    if (progressTimer) clearTimeout(progressTimer);
+    return { 'errors': msg.errors, 'warnings': msg.warnings };
+  }
+
+  internal.generateMessageList = function(messages)
+  {
+    var msg = '<ul>';
+    var numWarnings = 0;
+    var numErrors = 0;
+    for (var i = 0; i < messages.length; i++)
+    {
+      var msgLine = messages[i];
+      if (msgLine.indexOf('[Warning]') >= 0)
+      {
+        msg += '<li class="warning">' + Strings.encodeTags(msgLine.replace('[Warning]', ''));
+        numWarnings++;
+      }
+      else if (msgLine.indexOf('[Error]') >= 0)
+      {
+        msg += '<li class="error">' + Strings.encodeTags(msgLine.replace('[Error]', ''));
+        numErrors++;
+      }
+      else
+      {
+        msg += '<li class="ok">' + Strings.encodeTags(msgLine);
+      }
+    }
+    msg += '</ul>';
+    return { 'html': msg, 'errors': numErrors, 'warnings': numWarnings };
+  }
+
   /**
     Initialize the wizard: