"liste + delete composants"

static/scripts/tetalab.js

@@ -0,0 +1,59 @@
+var red = "#FF0000";
+var green = "#00FF00";
+var light_red = "#FCD5DC";
+var light_green = "#D5FCD8";
+var base_bg = "#FEFEFE";
+var base_border = "#555555";
+
+function update_componant(obj, componant_id, type) {
+  if (type == 'numeric') {
+    if (isNaN(obj.value)) {
+      alert('Valeur numérique uniquement');
+      return;
+    }
+  }
+  
+  var xhttp = new XMLHttpRequest();
+  xhttp.onerror = function(){
+    obj.style.backgroundColor = light_red;
+    setTimeout( function() {
+      obj.style.backgroundColor = base_bg;
+      }
+    , 2000);
+  };
+
+  xhttp.onload = function(){
+    var bg_color = light_red;
+    var border_color = red;
+    if (xhttp.status == 200) {
+      var response = xhttp.responseText;
+      if (response == 'OK'){
+          bg_color = light_green;
+          border_color = base_border;
+      } 
+    }
+    obj.style.backgroundColor = bg_color;
+    obj.style.borderColor = border_color;
+    setTimeout( function() {
+      obj.style.backgroundColor = base_bg;
+      }
+    , 2000);
+  };
+
+  xhttp.onreadystatechange = function() {
+  if (xhttp.readyState == 4 && xhttp.status == 200) {
+    var reponse = xhttp.responseText;
+    if (xhttp.responseText != 'OK')
+      obj.style.backgroundColor = light_red;
+    }
+  };
+  
+  xhttp.open('POST', '/componant/update/'+componant_id, true);
+  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhttp.send('field='+obj.id+'&value='+obj.value);
+}
+
+function confirm_delete() {
+  var msg="La suppression est définitive \net n'est pas autorisée si le \ncomposant fait partie d'un Kit.\n\nConfirmer ?";
+  return confirm(msg)
+}

static/style/style.css

@@ -184,6 +184,195 @@ div.footer {
   text-align: center;
 }
 
+/* ***********************************
+ *  Tables
+*********************************** */
+
+.border_left {
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.border_right {
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+div.block {
+  overflow: hidden;
+  width: 1000px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  height: 20px;
+/*
+  background-color: red;
+*/
+}
+
+div.inner{
+  overflow: hidden;
+  float: center;
+  height: 20px;
+}
+
+div.pages_nav_bar {
+  overflow: hidden;
+  width: 1000px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  height: 20px;
+  text-align: right;
+  padding-top: 10px;
+}
+
+div.block text{
+  width: 200px;
+  float: left;
+  text-align: left;
+  padding: 0 4px 0 4px;
+}
+
+div.block text.num{
+  width: 200px;
+  float: left;
+  padding: 0 4px 0 4px;
+  text-align: right;
+}
+
+div.inner text.edit, div.block text.edit  {
+  background: url(../images/edit.png);
+}
+
+div.inner text.trash {
+  background: url(../images/trash.png);
+}
+
+div.block text.refresh {
+  background: url(../images/refresh.png);
+}
+
+div.inner text.edit:hover, div.inner text.trash:hover, div.block text.refresh:hover {
+  background-color: #FFB387;
+  cursor: pointer;
+}
+
+div.inner text.edit {
+  width: 16px;
+  float:left;
+  height: 16px;
+  margin: 2px 0px 0px 20px;
+  border-radius: 2px;
+  background-repeat: no-repeat;
+}
+
+div.inner text.trash, div.inner text.edit, div.block text.refresh {
+  width: 8px;
+  float:left;
+  height: 16px;
+  margin: 2px 0px 0px 20px;
+  border-radius: 2px;
+  background-repeat: no-repeat;
+}
+
+div.even {
+  background-color: #FFFFFF;
+}
+
+div.odd {
+  background-color: #E5E5E5;
+}
+
+div.block label {
+  width: 200px;
+  display: block;
+  float: left;
+  text-align: center;
+  font-weight: bold;
+  background-color: #FF5D00;
+}
+
+div.block label:hover {
+  cursor: pointer;
+}
+
+div.block .input{
+  margin-left:4px;
+  float:left;
+}
+
+
+div.action_bar {
+  display: inline-block;
+  width: 50px;
+  height: 32px;
+}
+
+
+span.prev_page, span.next_page {
+  color: #FF5D00;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+span.prev_page:hover, span.next_page:hover {
+  color: #FFFFFF;
+  background-color: #FF5D00;
+  cursor: pointer;
+}
+
+span.page_num {
+  font-size: 12px;
+}
+
+/* ***********************************
+ *  Editables
+*********************************** */
+
+div.no_border {
+  border-style: none;
+  border-width: 0px;
+}
+
+div.margin_bottom {
+  margin-bottom: 4px;
+}
+
+div.block label.editable {
+  height: 18px;
+  text-align: left;
+  padding: 0 4px 0 4px;
+}
+
+div.block text.editable {
+  width: 200px;
+  float: left;
+  padding: 0 4px 0 4px;
+  margin-left: 4px;
+  text-align: right;
+  background-color: #FFFFFF;
+  border-style: solid;
+  border-width: 1px;
+  height: 18px;
+}
+
+div.block select, div.block input {
+  width: 310px;
+  float: left;
+  padding: 0 4px 0 4px;
+  margin-left: 4px;
+  text-align: right;
+  background-color: #FFFFFF;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #555555;
+  color: #555555;
+  height: 18px;
+}
+
+div.block input {
+  height: 17px;
+  width: 300px;
+}
 
 /* ***********************************
  *  Classes génériques