Create objects

app.py

@@ -1,6 +1,6 @@
 #!/usr/bin/env python
 
-from flask import Flask, render_template, send_from_directory
+from flask import Flask, redirect, request, render_template, send_from_directory
 from . import db
 
 app = Flask(__name__)
@@ -13,6 +13,14 @@ def hello_world():
     return render_template('index.html', objects=objects)
 
 
+@app.route("/create-object/", methods=["POST"])
+def create_object():
+    conn = db.get()
+    with conn:
+        db.Object.create(request.form.get('name'), conn)
+        return redirect('/')
+
+
 @app.route("/calibration")
 def calibration():
     return render_template('calibration.html')

db.py

@@ -1,9 +1,8 @@
 #!/usr/bin/env python
 
-from flask import current_app, g
+from flask import g
 import os
 import sqlite3
-import typing
 from typing import Optional
 
 
@@ -53,6 +52,15 @@ class Object:
         self.id = object_id
         self.name = name
 
+    @staticmethod
+    def create(name: str, db: sqlite3.Connection) -> 'Object':
+        cur = db.cursor()
+        response = cur.execute(
+            'INSERT INTO object(name) VALUES (?) RETURNING ' + Object.select_args() + ';',
+            [name]
+        )
+        return response.fetchone()
+
     def save(self, db: sqlite3.Connection):
         cur = db.cursor()
         cur.execute(

templates/index.html

@@ -5,14 +5,58 @@
     <div class="container">
         <h1 class="title">Bienvenue sur NenuScanner</h1>
         {% if objects %}
-            <ul>
-            {% for object in objects %}
-                <li>{{ object.name }}</li>
-            {% endfor %}
-            </ul>
+            <div class="content">
+                <p>Voici les objects existants dans la base de données :
+                <ul>
+                {% for object in objects %}
+                    <li>{{ object.name }}</li>
+                {% endfor %}
+                </ul>
+            </div>
         {% else %}
             <p>Il n'y a aucun object pour le moment...</p>
         {% endif %}
+        <button id="add-object" class="button is-primary">Ajouter un nouvel objet</button>
+        <div id="add-object-modal" class="modal">
+            <div class="modal-background"></div>
+            <form action="/create-object/" method="POST">
+                <div class="modal-content">
+                    <div class="field">
+                        <label class="label">Nom de l'object</label>
+                        <div class="control">
+                            <input class="input" type="text" name="name" placeholder="Nom de l'objet">
+                        </div>
+                    </div>
+
+                    <div class="field is-grouped is-grouped-centered">
+                        <div class="control">
+                            <button class="button is-primary">Créer un objet</button>
+                        </div>
+                    </div>
+                </div>
+                <button class="modal-close is-large" aria-label="close"></button>
+            </form>
+        </div>
     </div>
 </section>
 {% endblock content %}
+
+{% block extrajs %}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    let addObjectButton = document.getElementById('add-object');
+    let addObjectModal = document.getElementById('add-object-modal');
+
+    // Modal button show the modal
+    addObjectButton.addEventListener('click', () => {
+        addObjectModal.classList.add('is-active');
+    });
+
+    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach((close) => {
+        close.addEventListener('click', () => {
+            addObjectModal.classList.remove('is-active');
+        });
+    });
+});
+</script>
+{% endblock extrajs %}