Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
breandan
/
monorepo
1
0
Haarauta 0
Tiedostot Esitykset 4 Vetopyynnöt 0 Wiki
Selaa lähdekoodia

Bootstrap.js and better form control

Breandan Dezendorf 2 vuotta sitten
vanhempi
6ec49c7fc1
sitoutus
2753af6e56
4 muutettua tiedostoa jossa 77 lisäystä ja 62 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 5 5
      dezendorf/applications/gopy/gopy.py
  2. 5 27
      dezendorf/applications/gopy/templates/base.html
  3. 14 14
      dezendorf/applications/gopy/templates/edit.html
  4. 53 16
      dezendorf/applications/gopy/templates/list.html

+ 5 - 5
dezendorf/applications/gopy/gopy.py
Näytä tiedosto 

@@ -33,7 +33,7 @@ class LinkSchema(ma.Schema):
 
         fields = ('id', 'name', 'target', 'hit_count', 'owner_name')
 
 
 def get_links():
 
-    links = Link.query.all()
 
+    links = Link.query.order_by(Link.name).all()
 
     schema = LinkSchema(many=True)
 
     link_json = schema.dump(links)
 
     return links
 
@@ -67,14 +67,14 @@ def redirect_to_link(name):
 
     return redirect(link.target, code=302)
 
 
 
-@app.post('/<string:link_name>/add', strict_slashes=False)
 
-def add_link(link_name):
 
-    if link_exists(link_name) is True:
 
+@app.post('/add', strict_slashes=False)
 
+def add_link():
 
+    if link_exists(request.form['link_name']) is True:
 
         print("Link exists")
 
     else:
 
         print("Creating link")
 
         db.create_all()
 
-        link = Link(name=link_name, target=request.form['target'], hit_count=0, owner_name="unknown")
 
+        link = Link(name=request.form['link_name'], target=request.form['target'], hit_count=0, owner_name="unknown")
 
         db.session.add(link)
 
         db.session.commit()
 
     return redirect("/", code=302)

+ 5 - 27
dezendorf/applications/gopy/templates/base.html
Näytä tiedosto 

@@ -2,36 +2,14 @@
 
 <html lang="en">
 
 <head>
 
     <meta charset="UTF-8">
 
-    <title>{% block title %} {% endblock %} - FlaskApp</title>
 
-    <style>
 
-        .link {
 
-            padding: 10px;
 
-            margin: 5px;
 
-            background-color: #f3f3f3;
 
-            max-width: 800px;
 
-        }
 
-        .edit_button {
 
-            padding-right: 10px;
 
-            float: right;
 
-        }
 
-        .delete_button {
 
-            padding-right: 10px;
 
-            float: right;
 
-        }
 
-        .add_button {
 
-            padding-right: 10px;
 
-            float: right;
 
-        }
 
-        nav a {
 
-            color: #d64161;
 
-            font-size: 3em;
 
-            margin-left: 50px;
 
-            text-decoration: none;
 
-        }
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
-    </style>
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 
+   
+    <title>{% block title %} {% endblock %} - FlaskApp</title>
 
 </head>
 
 <body>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 
     <div class="content">
 
         {% block content %} {% endblock %}
 
     </div>

+ 14 - 14
dezendorf/applications/gopy/templates/edit.html
Näytä tiedosto 

@@ -1,21 +1,21 @@
 
 {% extends 'base.html' %}
 
 
 {% block content %}
 
-    <h1>{% block title %} Edit an Existing Link {% endblock %}</h1>
 
+<div class="container">
 
     <form method="post">
 
-        <label for="title">{{ link_name }}</label>
 
-        <br>
 
-        {{ request.form['link_name'] }}
 
-        <input type="hidden" name="link_name"
 
-               placeholder="Link name"
 
-               value="{{ request.form['link_name'] }}"></input>
 
-        <br>
 
-        <label for="content">Target</label>
 
-        <br>
 
-        <input type="text" name="target"
 
-               placeholder="http://example.com"
 
-               value="{{ request.form['target'] }}"></input>
 
-        <br>
 
+    <div class="mb-3">
 
+        <label for="formNameInput" class="form-label">Name</label>
 
+        <input type="text" readonly class="form-control-plaintext" id="formNameInput" name="link_name" placeholder="{{ link.name }}">
 
+      </div>
 
+      <div class="mb-3">
 
+        <label for="formTargetInput" class="form-label">Target</label>
 
+        <input type="text" class="form-control" id="formTargetInput" name="target" value="{{ link.target }}">
 
+      </div>
 
+      <div class="mb-3">
 
         <button type="submit">Submit</button>
 
+        </div>
 
     </form>
 
+</div>
 
+</div>
 
+
 
 {% endblock %}

+ 53 - 16
dezendorf/applications/gopy/templates/list.html
Näytä tiedosto 

@@ -1,25 +1,62 @@
 
 {% extends 'base.html' %}
 
 
 {% block content %}
 
-    <div class='link'>
 
-        <div>
 
-            <form method="post" action="/add">
 
-            <span class="name"><input type="text" name="name" placeholer="name"></input></span>
 
-            <span class="target"><input type="text" name="target" placeholder="http://example.com"></input></span>
 
-            <span class="add_button"><button type="submit">Add</button></span>
 
-            </form>
 
+<div class="container">
 
+  <form method="post" action="{{ url_for('add_link', link_name='') }}">
 
+  <div class="row">
 
+    <div class="col-sm-2">
 
+        <input type="text" name="link_name" placeholer="name"></input>
 
+    </div>
 
+    <div class="col-sm-8">
 
+        <input type="text" name="target" placeholder="http://example.com"></input>
 
+    </div>
 
+    <div class="col-sm-1">
 
+        <button type="submit">Add</button>
 
+    </div>
 
+  </div>
 
+  </form>
 
+  {% for link in links %}
 
+  <div class="row gx-5 border">
 
+    <div class="col-sm-2" >
 
+        <div class="border bg-light">
 
+            <a href="/{{ link['name'] }}">{{ link['name'] }}</a>
 
         </div>
 
     </div>
 
-
 
-    {% for link in links %}
 
-        <div class='link'>
 
-            <div>
 
-                <span class="name"><a href="/{{ link['name'] }}">{{ link['name'] }}</a></span>
 
-                <span class="target">{{ link['target'] }}</span>
 
-                <span class="target">{{ link['hit_count'] }}</span>
 
-                <span class="edit_button"><a href="{{ url_for('edit_link_form', link_name=link['name']) }}">Edit</a></span>
 
-                <span class="delete_button"><a href="{{ url_for('delete_link_form', link_id=link['id']) }}">Delete</a></span>
 
+    <div class="col-sm-8">
 
+        {{ link['target'] }}
 
+    </div>
 
+    <div class="col-sm-1">
 
+        <a class="btn btn-primary" data-bs-toggle="collapse" href="#linkCollapse{{ link['id'] }}" role="button" aria-expanded="false" aria-controls="linkCollapse{{ link['id'] }}">
 
+          Details
 
+        </a>
 
+    </div>
 
+    <div class="collapse" id="linkCollapse{{ link['id'] }}">
 
+      <div class="card card-body">
 
+        <div>
 
+            <div class="container">
 
+                <form method="post" action="{{ url_for('edit_link', link_name=link.name) }}">
 
+                <div class="mb-3">
 
+                    <label for="formNameInput" class="form-label">Name</label>
 
+                    <input type="text" readonly class="form-control-plaintext" id="formNameInput" name="link_name" placeholder="{{ link.name }}">
 
+                  </div>
 
+                  <div class="mb-3">
 
+                    <label for="formTargetInput" class="form-label">Target</label>
 
+                    <input type="text" class="form-control" id="formTargetInput" name="target" value="{{ link.target }}">
 
+                  </div>
 
+                  <div class="mb-3">
 
+                    <button type="submit">Update</button>
 
+                    </form>
 
+                    <form method="post" action="{{ url_for('delete_link', link_id=link.id) }}">
 
+  
+                    <button type="submit">Delete</button>
 
+                    
+                    </form>
 
+                    </div>
 
             </div>
 
         </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
     {% endfor %}
 
+</div>
 
 {% endblock %}