Add prototype

vre_www/website/js/account.js

@@ -0,0 +1,110 @@
+function setUserCallback() {
+  userFormEMailElement.value = user["e-mail"];
+  userFormFirstNameElement.value = user["firstName"];
+  userFormLastNameElement.value = user["lastName"];
+  userFormNotificationsElement.checked = user["notifications"];
+  userFormPhoneElement.value = user["phone"];
+  M.updateTextFields();
+
+  userFormEMailElement.addEventListener("input", event => {
+    eMailChanged = (user["e-mail"] != userFormEMailElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormFirstNameElement.addEventListener("input", event => {
+    firstNameChanged = (user["firstName"] != userFormFirstNameElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormLastNameElement.addEventListener("input", event => {
+    lastNameChanged = (user["lastName"] != userFormLastNameElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormNotificationsElement.addEventListener("change", event => {
+    notificationsChanged = (user["notifications"] != userFormNotificationsElement.checked) ? true : false;
+    evaluateUserForm();
+  });
+  userFormPhoneElement.addEventListener("input", event => {
+    phoneChanged = (user["phone"] != userFormPhoneElement.value) ? true : false;
+    evaluateUserForm();
+  });
+  userFormResetElement.addEventListener("click", event => {
+    eMailChanged = false;
+    firstNameChanged = false;
+    lastNameChanged = false;
+    notificationsChanged = false;
+    phoneChanged = false;
+    userFormEMailElement.value = user["e-mail"];
+    userFormFirstNameElement.value = user["firstName"];
+    userFormLastNameElement.value = user["lastName"];
+    userFormNotificationsElement.checked = user["notifications"];
+    userFormPhoneElement.value = user["phone"];
+    evaluateUserForm();
+  });
+  userFormSubmitElement.addEventListener("click", event => {
+    if (eMailChanged) {
+      user["e-mail"] = userFormEMailElement.value;
+      eMailChanged = false;
+    }
+    if (firstNameChanged) {
+      user["firstName"] = userFormFirstNameElement.value;
+      firstNameChanged = false;
+    }
+    if (lastNameChanged) {
+      user["lastName"] = userFormLastNameElement.value;
+      lastNameChanged = false;
+    }
+    if (notificationsChanged) {
+      user["notifications"] = userFormNotificationsElement.checked;
+      notificationsChanged = false;
+    }
+    if (phoneChanged) {
+      user["phone"] = userFormPhoneElement.value;
+      phoneChanged = false;
+    }
+    localStorage.setItem("user", JSON.stringify(user));
+    M.toast({html: "Benutzerdaten wurden aktualisiert."});
+    evaluateUserForm();
+  });
+}
+
+
+function evaluateUserForm() {
+  var somethingChanged;
+
+  somethingChanged = eMailChanged || firstNameChanged || lastNameChanged || notificationsChanged || phoneChanged;
+
+  if (somethingChanged) {
+    userFormResetElement.classList.remove("disabled");
+    userFormSubmitElement.classList.remove("disabled");
+  } else {
+    userFormResetElement.classList.add("disabled");
+    userFormSubmitElement.classList.add("disabled");
+  }
+}
+
+
+var eMailChanged;
+var firstNameChanged;
+var lastNameChanged;
+var notificationsChanged;
+var phoneChanged;
+var userFormEMailElement;
+var userFormFirstNameElement;
+var userFormLastNameElement;
+var userFormNotificationsElement;
+var userFormPhoneElement;
+var userFormResetElement;
+var userFormSubmitElement;
+
+
+eMailChanged = false;
+firstNameChanged = false;
+lastNameChanged = false;
+notificationsChanged = false;
+phoneChanged = false;
+userFormFirstNameElement = document.getElementById("user-form-first-name");
+userFormLastNameElement = document.getElementById("user-form-last-name");
+userFormEMailElement = document.getElementById("user-form-e-mail");
+userFormNotificationsElement = document.getElementById("user-form-notifications");
+userFormPhoneElement = document.getElementById("user-form-phone");
+userFormResetElement = document.getElementById("user-form-reset");
+userFormSubmitElement = document.getElementById("user-form-submit");

vre_www/website/js/index.js

@@ -0,0 +1,17 @@
+/**
+ * Process the submit event from the login form.
+ */
+function LoginFormSubmitHandler() {
+  var loginFormPasswordElement;
+  var loginFormUserElement;
+
+  loginFormPasswordElement = document.getElementById("login-form-password");
+  loginFormUserElement = document.getElementById("login-form-user");
+
+  try {
+    login(loginFormPasswordElement.value, loginFormUserElement.value);
+  } catch(e) {
+    loginFormPasswordElement.classList.add("invalid");
+    loginFormUserElement.classList.add("invalid");
+  }
+}

vre_www/website/js/job_form_handler.js

@@ -0,0 +1,43 @@
+function jobFormChangeHandler() {
+  if (jobFormFileElement.files.length === 0 || jobFormLanguageElement.value === "" || jobFormNameElement.value === "") {
+    jobFormSubmitElement.classList.add("disabled");
+  } else {
+    jobFormSubmitElement.classList.remove("disabled");
+  }
+}
+
+
+function jobFormSubmitHandler() {
+  createJob(jobFormFileElement.files[0], jobFormLanguageElement.value, jobFormNameElement.value, jobFormServiceElement.value, user["id"]);
+}
+
+
+var jobFormElement;
+var jobFormFileElement;
+var jobFormLanguageElement;
+var jobFormNameElement;
+var jobFormServiceElement;
+var jobFormSubmitElement;
+
+
+jobFormElement = document.getElementById("job_form");
+jobFormFileElement = document.getElementById("job_form_file");
+jobFormLanguageElement = document.getElementById("job_form_language");
+jobFormNameElement = document.getElementById("job_form_name");
+jobFormServiceElement = document.getElementById("job_form_service");
+jobFormSubmitElement =  document.getElementById("job_form_submit");
+
+
+jobFormFileElement.addEventListener("change", jobFormChangeHandler);
+jobFormLanguageElement.addEventListener("change", jobFormChangeHandler);
+jobFormNameElement.addEventListener("input", jobFormChangeHandler);
+
+M.Modal.init(
+  document.getElementById("create_job"),
+  {
+    "onCloseEnd": modal => {
+      jobFormElement.reset();
+      M.updateTextFields();
+    }
+  }
+);

vre_www/website/js/job_manager.js

@@ -0,0 +1,172 @@
+var JOBLANGUAGES = {
+  "nlp": {
+    "de": "Deutsch",
+    "en": "Englisch",
+    "fr": "Französisch",
+    "pt": "Portugisisch",
+    "es": "Spanisch"
+  },
+  "ocr": {
+    "deu": "Deutsch",
+    "deu_frak": "Deutsch (Fraktur)",
+    "eng": "Englisch",
+    "fra": "Französisch",
+    "por": "Portugisisch",
+    "spa": "Spanisch"
+  }
+};
+var JOBSERVICEICONS = {
+  "nlp": "format_textdirection_l_to_r",
+  "ocr": "find_in_page"
+};
+var JOBSTATUSCOLORS = {
+  "failed": "pink",
+  "finished": "teal",
+  "queued": "amber",
+  "running": "indigo"
+};
+var JOBSTATUSNAMES = {
+  "failed": 'Fehlgeschlagen',
+  "finished": 'Abgeschlossen',
+  "queued": 'Wartend',
+  "running": 'Laufend'
+}
+var JOBSTATUSTEXTS = {
+  'failed': 'Es ist ein Fehler bei der Bearbeitung des Auftrages aufgetreten. \
+             Für weitere Informationen wenden Sie sich mit dem \
+             Auftragskennzeichen an den Seitenbetreiber.',
+  'finished': 'Der Auftrag ist abgeschlossen, die Ergebnisse können nun \
+               heruntergeladen werden. Die Quelldatei bleibt verfügbar und \
+               kann jederzeit abgerufen werden.',
+  'queued': 'Der Auftrag befindet sich in der Warteschlange und wird vom \
+             System bearbeitet, sobald Rechenkapazität verfügbar ist.',
+  'running': 'Dieser Auftrag wird gerade bearbeitet, sobald der Vorgang \
+              abgeschlossen wurde, können die Ergebnisse hier heruntergeladen \
+              werden.'
+}
+
+
+var jobsCollapsibleElement;
+var jobStatusFilter;
+
+jobsCollapsibleElement = document.getElementById("jobs-collapsible");
+jobStatusFilter = '';
+
+
+M.Collapsible.init(
+  jobsCollapsibleElement,
+  {accordion: false}
+);
+document.querySelectorAll('[data-job-filter]').forEach(jobFilterElement => {
+  jobFilterElement.addEventListener("click", event => {
+    jobStatusFilter = event.currentTarget.getAttribute("data-job-filter");
+    jobListManager();
+  });
+});
+
+
+function jobListManager() {
+  jobs.forEach(job => {
+    var jobElement;
+
+    jobElement = document.getElementById(job["id"]);
+    // Check whether an element with id = job['id'] is found
+    if (jobElement) {
+      var jobResultElement;
+      var jobStatusElement;
+      var jobStatusTextElement;
+
+      jobResultElement = jobElement.querySelector('.job-result');
+      jobStatusElement = jobElement.querySelector('.job-status');
+      jobStatusTextElement = jobElement.querySelector('.job-status-text');
+
+      // Check whether the job status changed since it got printed
+      if (jobStatusElement.innerHTML != JOBSTATUSNAMES[job["status"]]) {
+        // Update the job status element (label and color)
+        jobStatusElement.innerHTML = JOBSTATUSNAMES[job["status"]];
+        jobStatusElement.classList.remove("pink", "teal", "amber", "indigo");
+        jobStatusElement.classList.add(JOBSTATUSCOLORS[job["status"]]);
+        // Update the job status text element
+        jobStatusTextElement.innerHTML = JOBSTATUSTEXTS[job["status"]];
+        // Check whether the new job status is 'finished'
+        if (job["status"] === "finished") {
+        // Unhide the jobs result element
+        jobResultElement.classList.remove("hide");
+        }
+      }
+      // If the job status doesn't match the current filter, remove it
+      //if (jobStatusFilter != "" && job["status"] != jobStatusFilter) jobElement.remove();
+      // If the job status doesn't match the current filter, hide it
+      if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
+        jobElement.classList.add('hide');
+      } else {
+        jobElement.classList.remove('hide');
+      }
+    } else {
+      // If the job status doesn't match the current filter, skip it
+      //if (jobStatusFilter != "" && job["status"] != jobStatusFilter) return;
+      jobElement = document.createElement("li");
+      jobElement.setAttribute("id", job["id"]);
+      // If the job status doesn't match the current filter, skip it
+      if (jobStatusFilter != "" && job["status"] != jobStatusFilter) {
+        jobElement.classList.add('hide');
+      } else {
+        jobElement.classList.remove('hide');
+      }
+      jobElement.innerHTML =
+        '<div class="collapsible-header">'
+          + '<i class="material-icons dropdown-indicator">arrow_drop_down</i>'
+          + '<i class="material-icons">'
+            + JOBSERVICEICONS[job["service"]]
+          + '</i>'
+          + job["name"]
+          + '<span class="job-status new badge ' + JOBSTATUSCOLORS[job["status"]] + '" data-badge-caption="">'
+            + JOBSTATUSNAMES[job["status"]]
+          + '</span>'
+        + '</div>'
+        + '<div class="collapsible-body">'
+          + '<p class="job-status-text">' + JOBSTATUSTEXTS[job["status"]] + '</p>'
+          + '<p>&nbsp;</p>'
+          + '<p class="overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">bookmark</i>'
+            + 'Auftragskennzeichen: '
+            + job["id"]
+          + '</p>'
+          + '<p class="overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">insert_drive_file</i>'
+            + 'Datei: '
+            + '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"] + '">'
+              + job["file"]
+            + '</a>'
+          + '</p>'
+          + '<p class="overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">language</i>'
+            + 'Sprache: '
+            + JOBLANGUAGES[job["service"]][job["language"]]
+          + '</p>'
+          + '<p class="job-result' + (job['status'] != 'finished' ? ' hide' : '') + ' overflow-hidden">'
+            + '<i class="material-icons blue-grey-text text-darken-2 left">archive</i>'
+            + 'Ergebnisse: '
+            + '<a href="../vre_files/jobs/' + job["id"] + '/' + job["file"].split(".").slice(0, -1).join(".") + '_-_' + job["service"] + '.zip">'
+              + 'Download'
+            + '</a>'
+          + '</p>'
+        + '</div>';
+
+      jobElement.querySelector('.collapsible-header').addEventListener("click", event => {
+        var dropdownIndicatorElement;
+
+        dropdownIndicatorElement = event.currentTarget.querySelector('.dropdown-indicator');
+        if (dropdownIndicatorElement.innerHTML === "arrow_drop_down") {
+          dropdownIndicatorElement.innerHTML = "arrow_drop_up";
+        } else {
+          dropdownIndicatorElement.innerHTML = "arrow_drop_down";
+        }
+      });
+      jobsCollapsibleElement.appendChild(jobElement);
+    }
+  });
+}
+
+
+setJobsCallback = jobListManager;

vre_www/website/js/materialize.min.js

@@ -0,0 +1,6 @@
+/*!
+ * Materialize v1.0.0 (http://materializecss.com)
+ * Copyright 2014-2017 Materialize
+ * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
+ */
+var _get=function t(e,i,n){null===e&&(e=Function.prototype);var s=Object.getOwnPropertyDescriptor(e,i);if(void 0===s){var o=Object.getPrototypeOf(e);return null===o?void 0:t(o,i,n)}if("value"in s)return s.value;var a=s.get;return void 0!==a?a.call(n):void 0},_createClass=function(){function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),t}}();function _possibleConstructorReturn(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}window.cash=function(){var i,o=document,a=window,t=Array.prototype,r=t.slice,n=t.filter,s=t.push,e=function(){},h=function(t){return typeof t==typeof e&&t.call},d=function(t){return"string"==typeof t},l=/^#[\w-]*$/,u=/^\.[\w-]*$/,c=/<.+>/,p=/^\w+$/;function v(t,e){e=e||o;var i=u.test(t)?e.getElementsByClassName(t.slice(1)):p.test(t)?e.getElementsByTagName(t):e.querySelectorAll(t);return i}function f(t){if(!i){var e=(i=o.implementation.createHTMLDocument(null)).createElement("base");e.href=o.location.href,i.head.appendChild(e)}return i.body.innerHTML=t,i.body.childNodes}function m(t){"loading"!==o.readyState?t():o.addEventListener("DOMContentLoaded",t)}function g(t,e){if(!t)return this;if(t.cash&&t!==a)return t;var i,n=t,s=0;if(d(t))n=l.test(t)?o.getElementById(t.slice(1)):c.test(t)?f(t):v(t,e);else if(h(t))return m(t),this;if(!n)return this;if(n.nodeType||n===a)this[0]=n,this.length=1;else for(i=this.length=n.length;s<i;s++)this[s]=n[s];return this}function _(t,e){return new g(t,e)}var y=_.fn=_.prototype=g.prototype={cash:!0,length:0,push:s,splice:t.splice,map:t.map,init:g};function k(t,e){for(var i=t.length,n=0;n<i&&!1!==e.call(t[n],t[n],n,t);n++);}function b(t,e){var i=t&&(t.matches||t.webkitMatchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector);return!!i&&i.call(t,e)}function w(e){return d(e)?b:e.cash?function(t){return e.is(t)}:function(t,e){return t===e}}function C(t){return _(r.call(t).filter(function(t,e,i){return i.indexOf(t)===e}))}Object.defineProperty(y,"constructor",{value:_}),_.parseHTML=f,_.noop=e,_.isFunction=h,_.isString=d,_.extend=y.extend=function(t){t=t||{};var e=r.call(arguments),i=e.length,n=1;for(1===e.length&&(t=this,n=0);n<i;n++)if(e[n])for(var s in e[n])e[n].hasOwnProperty(s)&&(t[s]=e[n][s]);return t},_.extend({merge:function(t,e){for(var i=+e.length,n=t.length,s=0;s<i;n++,s++)t[n]=e[s];return t.length=n,t},each:k,matches:b,unique:C,isArray:Array.isArray,isNumeric:function(t){return!isNaN(parseFloat(t))&&isFinite(t)}});var E=_.uid="_cash"+Date.now();function M(t){return t[E]=t[E]||{}}function O(t,e,i){return M(t)[e]=i}function x(t,e){var i=M(t);return void 0===i[e]&&(i[e]=t.dataset?t.dataset[e]:_(t).attr("data-"+e)),i[e]}y.extend({data:function(e,i){if(d(e))return void 0===i?x(this[0],e):this.each(function(t){return O(t,e,i)});for(var t in e)this.data(t,e[t]);return this},removeData:function(s){return this.each(function(t){return i=s,void((n=M(e=t))?delete n[i]:e.dataset?delete e.dataset[i]:_(e).removeAttr("data-"+name));var e,i,n})}});var L=/\S+/g;function T(t){return d(t)&&t.match(L)}function $(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}function B(t,e,i){t.classList?t.classList.add(e):i.indexOf(" "+e+" ")&&(t.className+=" "+e)}function D(t,e){t.classList?t.classList.remove(e):t.className=t.className.replace(e,"")}y.extend({addClass:function(t){var n=T(t);return n?this.each(function(e){var i=" "+e.className+" ";k(n,function(t){B(e,t,i)})}):this},attr:function(e,i){if(e){if(d(e))return void 0===i?this[0]?this[0].getAttribute?this[0].getAttribute(e):this[0][e]:void 0:this.each(function(t){t.setAttribute?t.setAttribute(e,i):t[e]=i});for(var t in e)this.attr(t,e[t]);return this}},hasClass:function(t){var e=!1,i=T(t);return i&&i.length&&this.each(function(t){return!(e=$(t,i[0]))}),e},prop:function(e,i){if(d(e))return void 0===i?this[0][e]:this.each(function(t){t[e]=i});for(var t in e)this.prop(t,e[t]);return this},removeAttr:function(e){return this.each(function(t){t.removeAttribute?t.removeAttribute(e):delete t[e]})},removeClass:function(t){if(!arguments.length)return this.attr("class","");var i=T(t);return i?this.each(function(e){k(i,function(t){D(e,t)})}):this},removeProp:function(e){return this.each(function(t){delete t[e]})},toggleClass:function(t,e){if(void 0!==e)return this[e?"addClassLine truncated

vre_www/website/js/vre.js

@@ -0,0 +1,154 @@
+var JOBSPOLLINTERVALL = 1000;
+var USERS = {
+  "testbenutzer": {
+    "e-mail": "t.benutzer@uni-bielefeld.de",
+    "firstName": "Test",
+    "id": "testbenutzer",
+    "lastName": "Benutzer",
+    "notifications": true,
+    "password": "passwort",
+    "phone": "+49 521 106-XXXXX"
+  }
+};
+
+
+// The job list of the current user
+var jobs;
+// The current user
+var user;
+
+
+/**
+ * Login a user and redirect the visitor to the portal page.
+ * @param {string} password - The password to use for login.
+ * @param {string} user - The user to use for login.
+ */
+function login(password, user) {
+  // Check if the user exists
+  if (USERS[user]) {
+  // Check if the password is correct
+  if (USERS[user]["password"] === password) {
+    // Save the user data to the local storage
+    localStorage.setItem("user", JSON.stringify(USERS[user]));
+    // Redirect the visitor to the portal page
+    window.location = "/vre/portal.html";
+    return;
+  }
+  }
+  // The function only ends here, when the user doesn't exists or when the
+  // password was wrong, in both cases it should throw an exception
+  throw "User doesn't exist or password was wrong!";
+}
+
+
+/**
+ * Logout the current user and redirect the visitor to the login page.
+ */
+function logout() {
+  // delete all data from the local storage
+  localStorage.clear();
+  // redirect to the login page
+  window.location = "/vre/";
+}
+
+
+/**
+ * The main function, which is executed on each page after it's completly
+ * loaded.
+ */
+function main() {
+  M.Dropdown.init(
+  document.getElementById("main-nav-account"),
+  {"constrainWidth": false, "coverTrigger": false}
+  );
+
+  // Indicates whether the current page is the login page
+  var isLoginPage;
+  // Indicates whether the current page is a service page (like ocr or nlp)
+  var isServicePage;
+
+
+  isLoginPage = window.location.pathname === "/vre/" || window.location.pathname === "/vre/index.html";
+  isServicePage = window.location.pathname === "/vre/nlp.html" || window.location.pathname === "/vre/ocr.html";
+
+  // Check if the visitor is logged in, by checking if the local storage
+  // contains a user
+  if (localStorage.getItem("user")) {
+  // Redirect to the portal page if the current page is the login page
+  if (isLoginPage) window.location = "portal.html";
+  // Load user from the local storage
+  user = JSON.parse(localStorage.getItem("user"));
+  // If a function named setUserCallback exists, call it
+  if (typeof(setUserCallback) === "function") setUserCallback();
+  } else {
+  // Redirect to the login page if the current page isn't the login page
+  if (!isLoginPage) window.location = "index.html";
+  return;
+  }
+
+  // Check if the local storage contains a copy of the users job list
+  if (localStorage.getItem("jobs")) {
+  // Load the job list from the local storage
+  jobs = JSON.parse(localStorage.getItem("jobs"));
+  // If a function named setJobsCallback exists, call it
+  if (typeof(setJobsCallback) === "function") setJobsCallback();
+  } else {
+  // Load the job list from the vre server
+  getJobs({"user": user["id"]}, function(newJobs) {
+    jobs = newJobs;
+    // If a function named setJobsCallback exists, call it
+    if (typeof(setJobsCallback) === "function") setJobsCallback();
+  });
+  }
+
+  // Set a continous poll for the job list
+  setInterval(getJobs, JOBSPOLLINTERVALL, {"user": user["id"]}, updateJobs);
+}
+
+
+/**
+ * Updates the job list in the local storage and the contents of the global
+ * job list variable. It also informs the visitor about job status changes.
+ * @param {Object[]} newJobs - The new job list.
+ */
+function updateJobs(newJobs) {
+  var i;
+  // Indicates whether the new job list differs from the old one
+  var hasJobsChanged;
+  // The new job list as JSON string
+  var newJobsAsJSONString;
+
+  newJobsAsJSONString = JSON.stringify(newJobs);
+  hasJobsChanged = localStorage.getItem("jobs") != newJobsAsJSONString;
+
+  if (hasJobsChanged) {
+  // Iterate over the old job list
+  for (i = 0; i < jobs.length; i++) {
+    // Check whether the status of the currently iterated job changed
+    if (jobs[i]["status"] != newJobs[i]["status"]) {
+    // Inform the visitor with a toast message about the new status
+    switch (newJobs[i]["status"]) {
+      case "failed":
+      M.toast({html: "Auftrag '" + jobs[i]["name"] + "' is fehlgeschlagen."});
+      break;
+      case "finished":
+      M.toast({html: "Auftrag '" + jobs[i]["name"] + "' wurde abgeschlossen."});
+      break;
+      case "running":
+      M.toast({html: "Auftrag '" + jobs[i]["name"] + "' wird bearbeitet."});
+      break;
+      default:
+    }
+    }
+  }
+  // Save the new job list to the local storage
+  localStorage.setItem("jobs", newJobsAsJSONString);
+  // Replace the global job list variable with the new job list
+  jobs = newJobs;
+  // If a function named setJobsCallback exists, call it
+  if (typeof(setJobsCallback) === "function") setJobsCallback();
+  }
+}
+
+
+window.onload = main;

vre_www/website/js/vre_manager_rest.js

@@ -0,0 +1,180 @@
+var VREMANAGER = "http://" + window.location.hostname + ":5000";
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to create a
+ * new job.
+ * @param {File} file - The file to process with the job.
+ * @param {string} language - The language of the file contents.
+ * @param {string} name - A name for the job, this doesn't have to be unique.
+ * @param {string} service - The service this job belongs to.
+ * @param {string} user - The user this job belongs to.
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function createJob(file, language, name, service, user, callback = console.log) {
+  var formData;
+  var oReq;
+  var query;
+
+  formData = new FormData();
+  formData.append("file", file);
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 201) {
+      M.toast({html: "Auftrag '" + name + "' wurde erstellt."});
+      callback(JSON.parse(this.responseText));
+    } else {
+      if (this.status === 415) {
+        M.toast({html: "Auftrag '" + name + "' konnte nicht erstellt werden.<br>(Unerwarteter Dateityp)"});
+      } else {
+        M.toast({html: "Auftrag '" + name + "' konnte nicht erstellt werden.<br>(Fehlercode: " + this.status + ")"});
+      }
+    }
+  });
+
+  query = "?language=" + language + "&name=" + name + "&service=" + service + "&user=" + user;
+
+  oReq.open("POST", VREMANAGER + "/vre/jobs" + query);
+  oReq.send(formData);
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to delete an
+ * existing job.
+ * @param {string} id - The id of the job to be deleted.
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function deleteJob(id, callback = console.log) {
+  var oReq;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 204) {
+      M.toast({html: "Auftrag '" + id + "' wurde gelöscht."});
+      callback();
+    } else {
+      M.toast({html: "Auftrag '" + id + "' konnte nicht gelöscht werden.<br>(Fehlercode: " + this.status + ")"});
+    }
+  });
+
+  oReq.open("DELETE", VREMANAGER + "/vre/jobs/" + id);
+  oReq.send();
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to get all
+ * informations about a specific and existing job.
+ * @param {string} id - The id of the job to get the information from.
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function getJob(id, callback = console.log) {
+  var oReq;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 200) {
+      callback(JSON.parse(this.responseText));
+    }
+  });
+
+  oReq.open("GET", VREMANAGER + "/vre/jobs/" + id);
+  oReq.send();
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to get a
+ * (filtered) list of all jobs.
+ * @param {object} [filters=null] - An object containing filters. E.g.
+ * {'service': 'nlp', 'status': 'finished'}
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function getJobs(filters = null, callback = console.log) {
+  var oReq;
+  var query;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 200) {
+      callback(JSON.parse(this.responseText));
+    }
+  });
+
+  query = ""
+  if (filters) {
+    if (filters["name"]) {
+      query += (query === "") ? "?" : "&";
+      query += "name=" + filters["name"];
+    }
+    if (filters["service"]) {
+      query += (query === "") ? "?" : "&";
+      query += "service=" + filters["service"];
+    }
+    if (filters["status"]) {
+      query += (query === "") ? "?" : "&";
+      query += "status=" + filters["status"];
+    }
+    if (filters["user"]) {
+      query += (query === "") ? "?" : "&";
+      query += "user=" + filters["user"];
+    }
+  }
+
+  oReq.open("GET", VREMANAGER + "/vre/jobs" + query);
+  oReq.send();
+}
+
+
+/**
+ * Sends an asynchronous HTTP request to the vre manager in order to update the
+ * values of a specific and existing job.
+ * @param {string} id - The id of the job to update.
+ * @param {object} [newValues=null] - An object containing the new values. E.g.
+ * {'status': 'finished'}
+ * @param {function} [callback] - A function, that is called after the HTTP
+ * request finished.
+ */
+function updateJob(id, newValues = null, callback = console.log) {
+  var oReq;
+  var query;
+
+  oReq = new XMLHttpRequest();
+  oReq.addEventListener("loadend", function(oEvent) {
+    if (this.status === 200) {
+      M.toast({html: "Auftrag '" + id + "' wurde aktualisiert."});
+      callback(JSON.parse(this.responseText));
+    } else {
+      M.toast({html: "Auftrag '" + id + "' konnte nicht aktualisiert werden.<br>(Fehlercode: " + this.status + ")"});
+    }
+  });
+
+  query = ""
+  if (newValues) {
+    if (newValues["name"]) {
+      query += (query === "") ? "?" : "&";
+      query += "name=" + newValues["name"];
+    }
+    if (newValues["language"]) {
+      query += (query === "") ? "?" : "&";
+      query += "language=" + newValues["language"];
+    }
+    if (newValues["report"]) {
+      query += (query === "") ? "?" : "&";
+      query += "report=" + newValues["report"];
+    }
+    if (newValues["status"]) {
+      query += (query === "") ? "?" : "&";
+      query += "status=" + newValues["status"];
+    }
+  }
+
+  oReq.open("PUT", VREMANAGER + "/vre/jobs/" + id + query);
+  oReq.send();
+}