script fonctionnel creation de "product" et insertion de 3 lignes

docker-compose.yml

@@ -7,7 +7,7 @@ volumes:
 services:
     slim:
         build: ./
-        image: php:7-alpine
+        image: php:8-alpine
         working_dir: /var/www
         command: php -S 0.0.0.0:8080 -t public
         environment:
@@ -25,12 +25,14 @@ services:
             MYSQL_DATABASE: lehangarlocal
             MYSQL_USER: user
             MYSQL_PASSWORD: user
+        volumes:
+          - ./script.sql:/docker-entrypoint-initdb.d/script.sql
 
     phpmyadmin:
         image: phpmyadmin
         restart: always
         ports:
-            - 8000:8000
+            - 8100:80
         environment:
             - PMA_ARBITRARY=1
     composer:

dockerfile

-FROM php:7.4-alpine
+FROM php:8-alpine
 
 RUN docker-php-ext-install pdo pdo_mysql

public/main.js

@@ -19,20 +19,21 @@ var createNewTaskElement=function(taskString){
 	//button.edit
 	var editButton=document.createElement("button");//edit button
 
+	var div= document.createElement("div");
 	//button.delete
 	var deleteButton=document.createElement("button");//delete button
 
 	label.innerText=taskString;
 	label.className="nomcommande";
-	livre.innerText="Livrée";
+	livre.innerText="Livré";
 	livre.className = "livre";
 
 	//Each elements, needs appending
 	checkBox.type="checkbox";
 	editInput.type="text";
 
-	editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
-	editButton.className="edit";
+	editButton.innerText="Voir";//innerText encodes special characters, HTML does not.
+	editButton.className="voir";
 	deleteButton.innerText="Delete";
 	deleteButton.className="delete";
 
@@ -40,6 +41,7 @@ var createNewTaskElement=function(taskString){
 
 	//and appending.
 	
+	listItem.appendChild(div);
 	listItem.appendChild(label);
 	listItem.appendChild(livre);
 
@@ -65,33 +67,6 @@ var addTask=function(){
 
 }
 
-//Edit an existing task.
-
-var editTask=function(){
-console.log("Edit Task...");
-console.log("Change 'edit' to 'save'");
-
-
-var listItem=this.parentNode;
-
-var editInput=listItem.querySelector('input[type=text]');
-var label=listItem.querySelector("label");
-var containsClass=listItem.classList.contains("editMode");
-		//If class of the parent is .editmode
-		if(containsClass){
-
-		//switch to .editmode
-		//label becomes the inputs value.
-			label.innerText=editInput.value;
-		}else{
-			editInput.value=label.innerText;
-		}
-
-		//toggle .editmode on the parent.
-		listItem.classList.toggle("editMode");
-}
-
-
 
 
 //Delete task.
@@ -151,7 +126,7 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
 
 
 			//Bind editTask to edit button.
-			editButton.onclick=editTask;
+			//editButton.onclick=editTask;
 			//Bind deleteTask to delete button.
 			deleteButton.onclick=deleteTask;
 			//Bind taskCompleted to checkBoxEventHandler.

script.sql

@@ -32,20 +32,11 @@ CREATE TABLE `product` (
   `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
   `price` decimal(11) NOT NULL,
   `amount_unit` decimal(11) NOT NULL,
-  `unit` decimal(11) NOT NULL,
+  `unit` varchar(11) COLLATE utf8_unicode_ci NOT NULL,
   `description` varchar(255) COLLATE utf8_unicode_ci NOT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
 
 
-CREATE TABLE `product` (
-  `id` int(11) NOT NULL,
-  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
-  `price` decimal(11) NOT NULL,
-  `amount_unit` decimal(11) NOT NULL,
-  `unit` decimal(11) NOT NULL,
-  `description` varchar(255) COLLATE utf8_unicode_ci NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
-
 
 INSERT INTO `product` (`id`, `name`, `price`, `amount_unit`, `unit`, `description`) VALUES
 (1, 'Lait BIO', '0.80', '0.80', '1L', 'Lait BIO produit dans une ferme par des chèvre unijambiste'),

src/views/cooperative.html.twig

@@ -15,10 +15,54 @@
       margin: 100px auto 0;
     }
 
+    /*Label avec le nom de la commande*/
     .nomcommande{
         margin-right: 2em;
     }
 
+
+    /* Bouton voir*/
+   
+.voir {
+  background-color: #0095ff;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.15385;
+  margin: 0;
+  outline: none;
+  padding: 8px .8em;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+.voir:hover,
+.voir:focus {
+  background-color: #07c;
+}
+
+.voir:focus {
+  box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
+}
+
+.voir:active {
+  background-color: #0064bd;
+  box-shadow: none;
+}
+    
+
     /* Completed */
     #completed-tasks label {
       text-decoration: line-through;