Added error popup to 404 error on set lookup

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, redirect, jsonify, render_template, Response
+from flask import Flask, request, redirect, jsonify, render_template, Response,url_for
 import json
 from pprint import pprint as pp
 from pathlib import Path
@@ -42,10 +42,10 @@ def create():
 
     if request.method == 'POST':
         set_num = request.form['inputField']
-        add_duplicate = request.form.get('addDuplicate', False) == 'true'
+        # add_duplicate = request.form.get('addDuplicate', False) == 'true'
         # Do something with the input value and the checkbox value
-        print("Input value:", set_num)
+        # print("Input value:", set_num)
-        print("Add duplicate:", add_duplicate)
+        # print("Add duplicate:", add_duplicate)
         # You can perform any further processing or redirect to another page
 
         if '-' not in set_num:
@@ -59,10 +59,16 @@ def create():
         unique_set_id = generate_unique_set_unique()
 
         # Get Set info and add to SQL
-        response = json.loads(rebrick.lego.get_set(set_num).read())
+        response = ''
-        count+=1
+        try:
-        print(response)
+            response = json.loads(rebrick.lego.get_set(set_num).read()) 
+        except Exception as e:
+            print(e.code)
+            if e.code == 404:
+                return render_template('create.html',error=set_num)
 
+        count+=1
+        
         cursor.execute('''INSERT INTO sets (
             set_num,
             name,
@@ -242,6 +248,7 @@ def create():
             
             conn.commit()
         conn.close()
+        print(count)
         return redirect('/')
     
     conn.close()

templates/create.html

@@ -45,6 +45,88 @@
 		  </div>
     </section>
 
+    {% if error is defined %}
+    <button class="js-modal-trigger" data-target="modal-js-example" id="modal-js">
+    </button> 
+    {% else %}
+    <button id="modal-js">
+    </button> 
+    {% endif %}
+
+
+    <div class="modal" id="modal-js-example">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Cannot add set!</p>
+          <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          Set number does not exists: 
+          <br>
+          <b>{{ error }}</b>
+        </section>
+        <footer class="modal-card-foot">
+          <div class="buttons">
+            <button class="button is-primary">OK</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+
+
   </body>
+
+<script>
+
+
+  document.addEventListener('DOMContentLoaded', () => {
+
+    window.onload = function () {
+document.getElementById("modal-js").click(); };
+
+    // Functions to open and close a modal
+    function openModal($el) {
+      $el.classList.add('is-active');
+    }
+  
+    function closeModal($el) {
+      $el.classList.remove('is-active');
+    }
+  
+    function closeAllModals() {
+      (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+        closeModal($modal);
+      });
+    }
+  
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+      const modal = $trigger.dataset.target;
+      const $target = document.getElementById(modal);
+  
+      $trigger.addEventListener('click', () => {
+        openModal($target);
+      });
+    });
+  
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+      const $target = $close.closest('.modal');
+  
+      $close.addEventListener('click', () => {
+        closeModal($target);
+      });
+    });
+  
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+      if(event.key === "Escape") {
+        closeAllModals();
+      }
+    });
+  });
+    </script>
+
 </html>