Fix references that fail when the app is mounted as a subfolder

queries.py

@@ -106,8 +106,9 @@ def process_form(form, user): # creates a set owned by the given user using the
     cells = []
     cell_fields = dict(filter(lambda elem: 'cell' in elem[0] and 'cell[0]' not in elem[0], form.items())) # non-"side name" cells
     for field in cell_fields:
-        card_index = int(field[5:6])-1
-        side_index = int(field[-2:-1])
+        card_index = int(field[5:-1:].split('][')[0]) - 1
+        side_index = int(field[5:-1:].split('][')[1])
+
         cell = {'card_id': card_index+card_id, 'side_id': side_id+side_index, 'info': form[field]}
         cells.append(cell)
     cells_result = db.engine.execute(Cell_SQL.__table__.insert(), cells)

static/javascript/set-study.js

@@ -52,7 +52,8 @@ function shuffleArray(array) {
 
 $(document).ready(function(){
     let pathArray = window.location.pathname.split('/');
-    let set_id = pathArray[2];
+    let max_occur = pathArray.length;
+    let set_id = pathArray[Number(max_occur-2)];
     let total_sides, total_cards, sides, cards, cards_shuffled;
     let side_order = {};
     $.get("../../api/set_info?set=" + set_id, function(data, status){

templates/base.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Flexcards</title>
     <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static',filename='favicon/favicon.ico') }}"/>
-    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static',filename=' favicon/apple-touch-icon.png') }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static',filename='favicon/apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static',filename='favicon/favicon-32x32.png') }}">
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static',filename='favicon/favicon-16x16.png') }}">
     <link rel="manifest" href="{{ url_for('static',filename= 'favicon/site.webmanifest') }}">
@@ -110,4 +110,4 @@ <h5 class="modal-title" id="siteModalLabel">
                 </div>
             </div>
         </div>
-    </div>
+    </div>

templates/create.html

@@ -2,7 +2,7 @@
 {% block head %}
     {{ super() }}
     <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/create.css') }}">
-    <script type="text/javascript" src="../static/javascript/create.js"></script>
+    <script type="text/javascript" src="{{ url_for('static',filename='javascript/create.js') }}"></script>
     <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
 {% endblock %}
@@ -83,4 +83,4 @@ <h1>Create a set</h1>
     <p>Public sets are viewable by anyone, while private sets can only be seen by you.
         Regardless of whether a set is public or private, only you can edit and delete it.</p>
     <p>You can play around with adding or removing sides and cards - these are flexible flashcards!</p>
-{% endblock %}
+{% endblock %}

templates/set.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block head %}
     {{ super() }}
-    <script type="text/javascript" src="../static/javascript/set.js"></script>
+    <script type="text/javascript" src="{{ url_for('static',filename='javascript/set.js') }}"></script>
 {% endblock %}
 {% block body %}
     <div class="row">
@@ -46,4 +46,4 @@ <h6 class="float-right">Creator: {{ user.name }}</h6>
 {% block modalContent %}
     <p>In this view, you can see a quick overview of a set.</p>
     <p>From here, you can study the set. If you own it, you can also edit or delete it.</p>
-{% endblock %}
+{% endblock %}