Démelage de spaghettis !

static/scripts/tetawebapp.js

@@ -0,0 +1,249 @@
+var red = "#FF0000";
+var green = "#00FF00";
+var light_red = "#FCD5DC";
+var light_green = "#D5FCD8";
+var base_bg = "#FFFFFF";
+var base_border = "#888888";
+var coloured_bg = "#FF5D00";
+var clear_bg = "#E5E5E5";
+var text_color = "#555555";
+
+/* **************************************************************************************
+ * GLOBAL
+ * **************************************************************************************/
+
+// Cookies
+function setcookie(cname, cvalue, exdays) {
+    // Set cookie
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    var expires = "expires="+ d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+function getcookie(cname) {
+  // Get cookie by name
+  var value = "; " + document.cookie;
+  var parts = value.split("; " + cname + "=");
+  if (parts.length == 2) return parts.pop().split(";").shift();
+}
+
+// Eye candies
+function valid_input(obj) {
+  // Valid input makes obj background to glow green for 2 seconds
+  // If obj borders were red, they get they normal color back
+  obj.style.backgroundColor = light_green;
+  obj.style.borderColor = base_border;
+  setTimeout( function() {
+    obj.style.backgroundColor = base_bg;
+    }
+  , 2000);
+}
+
+function invalid_input(obj) {
+  // Invalid input makes obj borders and background to glow red for 2 seconds
+  // Border color will stay red until a valid input is sent
+  obj.style.backgroundColor = light_red;
+  obj.style.borderColor = red;
+  setTimeout( function() {
+    obj.style.backgroundColor = base_bg;
+    }
+  , 2000);
+}
+
+function valid_upload(obj) {
+  // Valid input makes obj background to glow green for 2 seconds
+  // If obj borders were red, they get they normal color back
+  obj.style.backgroundColor = green;
+  obj.style.borderColor = text_color;
+  obj.style.borderStyle = 'solid';
+  setTimeout( function() {
+    obj.style.backgroundColor = clear_bg;
+    obj.style.borderStyle = 'none';
+    }
+  , 2000);
+}
+
+function invalid_upload(obj) {
+  // Invalid input makes obj borders and background to glow red for 2 seconds
+  // Border color will stay red until a valid input is sent
+  obj.style.backgroundColor = red;
+  obj.style.borderColor = text_color;
+  obj.style.borderStyle = 'solid';
+  setTimeout( function() {
+    obj.style.borderStyle = 'solid';
+    obj.style.backgroundColor = clear_bg;
+    obj.style.borderColor = red;
+    }
+  , 2000);
+}
+
+function lit(obj) {
+  // Lit bacground and border on obj (use by input type=file)
+  obj.style.backgroundColor = coloured_bg;
+  obj.style.borderColor = text_color;
+  obj.style.borderStyle = 'solid';
+}
+
+function unlit(obj) {
+  // Unlit bacground and border on obj (use by input type=file)
+  obj.style.backgroundColor = clear_bg;
+  obj.style.borderColor = clear_bg;
+  obj.style.borderStyle = 'none';
+}
+
+
+function verify_login() {
+  // Verify login inputs
+  login = document.getElementById('login');
+  password = document.getElementById('password');
+  if (login.value.length > 0) {
+    valid_input(login);
+    if (password.value.length > 0) {
+      valid_input(password);
+      return true;
+    }
+    invalid_input(password);
+    return false;
+  }
+  invalid_input(login);
+  return false;
+}
+
+function logout() {
+  // Logout user
+  setcookie('token', '', 30);
+  document.location = '/';
+}
+
+/* **************************************************************************************
+ * AJAX
+ * **************************************************************************************/
+
+function get_html_from_ajax(obj, url) {
+  // Get HTML content from AJAX request from url argument
+  // HTML content is then put as innerHTML to obj
+  var xhttp = new XMLHttpRequest();
+  xhttp.onerror = function(){
+    obj.innerHTML = "Error while getting content (1)";
+  };
+
+  xhttp.onload = function(){
+    if (xhttp.status != 200) {
+      obj.innerHTML = "Error while getting content (2)";
+      } 
+  };
+
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState == 4 && xhttp.status == 200) {
+      var response = xhttp.responseText;
+      obj.innerHTML = response;
+    }
+  };
+  xhttp.open('POST', url, true);
+  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhttp.send();
+}
+
+function set_value_from_ajax(obj, url, err_code) {
+  // Send value from obj.value via AJAX request to url argument
+  // obj.value is passed to URL in a REST sheme like <URL>/<VALUE>
+  // If err_code response is received, then a server side
+  // error has occured and input is invalidated.
+  url = url + '/' + obj.value;
+  var xhttp = new XMLHttpRequest();
+  xhttp.onerror = function(){
+    invalid_input(obj);
+  };
+
+  xhttp.onload = function(){
+    if (xhttp.status != 200) {
+      invalid_input(obj);
+      } 
+  };
+
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState == 4 && xhttp.status == 200) {
+      var response = xhttp.responseText;
+      if (response == err_code) {
+        invalid_input(obj);
+        return;
+      }
+      valid_input(obj);
+      return;
+    }
+  };
+  xhttp.open('POST', url, true);
+  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhttp.send();
+}
+
+function get_value_from_ajax(obj, url, err_code) {
+  // Get value from AJAX request
+  // The returned value is then set to obj.value.
+  // If err_code response is received, then a server side
+  // error has occured and input is invalidated
+  var xhttp = new XMLHttpRequest();
+  xhttp.onerror = function(){
+    invalid_input(obj);
+  };
+
+  xhttp.onload = function(){
+    if (xhttp.status != 200) {
+      invalid_input(obj);
+      }
+  };
+
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState == 4 && xhttp.status == 200) {
+      var response = xhttp.responseText;
+      if (response == err_code) {
+        invalid_input(obj);
+        return;
+      }
+      obj.value = response;
+      valid_input(obj);
+      return;
+    }
+  };
+  xhttp.open('POST', url, true);
+  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhttp.send();
+}
+
+function upload_file_from_ajax(obj, url, err_code) {
+  // Upload files get from <obj> to the specified <url>
+  // if <errcode> is returned input is invalidated
+  var files = obj.files;
+  var icon_id = obj.id.substring(obj.id.lastIndexOf("_") + 1);
+  var icon_obj = document.getElementById("upload_icon_" + icon_id)
+  var xhttp = new XMLHttpRequest();
+  xhttp.onerror = function(){
+    invalid_upload(icon_obj);
+  };
+
+  xhttp.onload = function(){
+    if (xhttp.status != 200) {
+      invalid_upload(icon_obj);
+      } 
+  };
+
+  xhttp.onreadystatechange = function() {
+    if (xhttp.readyState == 4 && xhttp.status == 200) {
+      var response = xhttp.responseText;
+      if (response == err_code) {
+        invalid_upload(icon_obj);
+        return;
+      }
+      valid_upload(icon_obj);
+      return;
+    }
+  };
+  
+  xhttp.open('POST', url, true);
+  var formData = new FormData();
+  for (var i=0; i < files.length; i++){
+    formData.append("files", files[i], files[i].name);
+  }
+  xhttp.send(formData);
+}

static/styles/colors.css

@@ -0,0 +1,29 @@
+/*
+* Here are the base color scheme and icon set.
+* You can modify it or create your own using the same variables
+* and make it loaded after this one but before the fonts.css in
+* the HTML header section of the index.html template file.
+*/
+:root {
+    --coloured-bg: #FF5D00;
+    --light-coloured-bg: #FFB387;
+    --clear-bg: #E5E5E5;
+    --mid-bg: #BBBBBB;
+    --dark-bg: #2B2B2B;
+    --dark-border: #888888;
+    --text-color: #555555;
+    --white: #FFFFFF;
+    --black: #000000;
+    --font-normal: url("/static/fonts/RobotoCondensed-Regular.ttf") format("truetype");
+    --font-bold: url("/static/fonts/RobotoCondensed-Bold.ttf") format("truetype");
+    --banner-logo: url(/static/images/logo.png);
+    --add_icon: url(/static/images/add.png);
+    --edit_icon: url(/static/images/edit.png);
+    --login_icon: url(/static/images/login.png);
+    --logout_icon: url(/static/images/logout.png);
+    --refresh_icon: url(/static/images/refresh.png);
+    --save_icon: url(/static/images/save.png);
+    --search_icon: url(/static/images/search.png);
+    --trash_icon: url(/static/images/trash.png);
+    --upload_icon: url(/static/images/upload.png);
+}

static/styles/fonts.css

@@ -0,0 +1,20 @@
+/*
+* Here are the font definitions.
+* You can modify it or create your own and make it loaded
+* after this one in the HTML header section of the index.html
+* template file.
+*/
+
+@font-face {
+	font-family: "Roboto Condensed";
+	font-style: normal;
+	font-weight: 400;
+	src: var(--font-normal);
+}
+
+@font-face {
+	font-family: "Roboto Condensed";
+	font-style: normal;
+	font-weight: 700;
+	src: var(--font-bold);
+}

static/styles/tetawebapp.css

@@ -0,0 +1,370 @@
+/*
+* Do NOT modify this file:
+* ------------------------
+* If you want to add or modify classes, create a new
+* CSS files and make it loaded after this one in the
+* HTML header section of the index.html template file.
+*/
+
+* {
+ box-sizing: border-box; 
+}
+
+body {
+  margin: 10px;
+  font-family: "Roboto Condensed";
+  background-color:  var(--dark-bg);
+}
+
+div.content {
+  display: flex;
+  min-height: calc(100vh - 110px);
+}
+
+main > article {
+  flex: 1;
+  background-color:  var(--clear-bg);
+}
+
+main > section.inline {
+  display: flex;
+  background-color:  var(--clear-bg);
+}
+
+main > section.inline > article.left {
+  flex: 0 0 50%;
+  margin-left: 10px;
+}
+
+main > section.inline > article.right {
+  flex: 1;
+  margin-left: 10px;
+}
+
+div.content > nav.vertical {
+  flex: 0 0 200px;
+  background-color:  var(--clear-bg);
+  border-right-color: var(--mid-bg);
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+
+div.content > nav.vertical {
+  order: -1;
+  display: block;
+}
+
+div.content > nav.vertical > a {
+  display: block;
+  background-color: var(--clear-bg);
+  font-size: 20px;
+  color: var(--text-color);
+  padding: 5px;
+  text-decoration: none;
+}
+
+div.content > nav.vertical > a:hover {
+  background-color:  var(--coloured-bg);
+  color: var(--white);
+  cursor: pointer;
+}
+
+div.content > nav.vertical > a.selected {
+  background-color:  var(--light-coloured-bg);
+}
+
+main {
+  color: var(--text-color);
+  background-color: var(--clear-bg);
+  width: 100%;
+}
+
+main > div.navbar_container {
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+
+main > div.navbar_container > ul.horizontal {
+  display: inline-block;
+  list-style-type: none;
+  margin: 10px;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--white);
+  border-color: var(--coloured-bg);
+  border-style: solid;
+  border-width: 1px;
+  color: var(--text-color);
+  border-radius: 2px;
+}
+
+main > div.navbar_container > ul.horizontal > li {
+  float: left;
+}
+
+main > div.navbar_container > ul.horizontal > li > a {
+  display: block;
+  color: var(--text-color);
+  text-align: center;
+  padding: 5px;
+  text-decoration: none;
+}
+
+main > div.navbar_container > ul.horizontal > li > a:hover {
+  background-color: var(--coloured-bg);
+  color: var(--white);
+}
+
+main > div.navbar_container > ul.horizontal > li > a.right_border {
+  border-right-color: var(--coloured-bg);
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+
+main > div.navbar_container > ul.horizontal > li > a.selected {
+  background-color: var(--light-coloured-bg);
+}
+
+main > article {
+  padding: 10px;
+  color: var(--text-color);
+  display: block;
+}
+
+main > article.error,
+main > article.error > p {
+  padding: 10px;
+  color: var(--text-color);
+  display: block;
+  text-align: center;
+}
+
+main > article > h3,
+main > section.inline > article > h3 {
+  font-size: 30px;
+  color: var(--text-color);
+  margin-bottom: 10px;
+}
+
+main > article > p,
+main > article > ul,
+main > article > ol {
+  color: var(--text-color);
+  text-align: justify;
+  text-justify: distribute;
+}
+
+main > hr {
+  border-color: var(--mid-bg);
+  border-style: solid;
+  border-width: 1px;
+}
+
+main > article > img {
+  display:inline-block;
+  border-color: var(--mid-bg);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 4px;
+}
+
+main > article > p > a {
+  color: var(--coloured-bg);
+}
+
+main > article > p > a:hover {
+  text-decoration: none;
+}
+
+main > article.right > img {
+  float: right;
+  margin: 0 0 0px 10px;
+}
+
+main > article.left > img {
+  float: left;
+  margin: 0 10px 0px 0;
+}
+
+header {
+  height: 65px;
+  font-size: 34px;
+  padding: 10px;
+  text-align: right;
+  color: var(--white);
+  background: var(--banner-logo);
+  background-repeat: no-repeat;
+  background-position: 10px;
+  text-shadow: 0 0 1px var(--black);
+  border-bottom-color: var(--dark-border);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-color: var(--white);
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+footer {
+  height: 35px;
+  font-size: 12px;
+  text-align: center;
+  padding: 1em;
+  border-bottom-color: var(--white);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-top-color: var(--dark-border);
+  border-top-style: solid;
+  border-top-width: 1px;
+}
+
+header,
+footer {
+  background-color: var(--coloured-bg);
+  color: var(--white);
+}
+
+input[type="text"],
+input[type="password"],
+textarea,
+select,
+pre {
+  border-color: var(--dark-border);
+  border-style: solid;
+  border-width: 1px;
+  background-color: var(--white);
+  color: var(--text-color);
+  padding: 5px;
+  font-family: "Roboto Condensed";
+  margin: 5px;
+}
+
+pre {
+  border-color: var(--coloured-bg);
+}
+
+button,
+input[type="button"],
+input[type="submit"] {
+  border-color: var(--dark-border);
+  border-style: solid;
+  border-width: 1px;
+  background-color: var(--coloured-bg);
+  color: var(--white);
+  font-weight: bold;
+  padding: 5px;
+  font-family: "Roboto Condensed";
+  margin: 5px;
+  border-radius: 4px;
+}
+
+button:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover,
+input[type="file"]:hover {
+  background-color: var(--light-coloured-bg);
+  color: var(--text-color);
+  cursor: pointer;
+}
+
+div.file_upload {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  border-radius: 2px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--clear-bg);
+}
+
+input[type="file"] {
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  left: 0;
+  top: 1px;
+  opacity: 0;
+}
+
+
+input.add,
+input.edit,
+input.login,
+input.logout,
+input.refresh,
+input.save,
+input.search,
+input.trash,
+input.upload {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  padding: 0;
+  border-radius: 2px;
+  border-style: none;
+}
+
+input.add:hover,
+input.edit:hover,
+input.login:hover,
+input.logout:hover,
+input.refresh:hover,
+input.save:hover,
+input.search:hover,
+input.trash:hover,
+input.upload:hover {
+  border-color: var(--text-color);
+  border-style: solid;
+  border-width: 1px;
+  background-color: var(--coloured-bg);
+  cursor: pointer;
+}
+
+input.add {
+  background: var(--add_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.edit {
+  background: var(--edit_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.login {
+  background: var(--login_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.logout {
+  background: var(--logout_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.refresh {
+  background: var(--refresh_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.save {
+  background: var(--save_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.search {
+  background: var(--search_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.trash {
+  background: var(--trash_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+input.upload {
+  background: var(--upload_icon);
+  background-repeat: no-repeat;
+  background-position: center center;
+}