Edit Event Form

app/dependencies.py

@@ -1,5 +1,11 @@
+import os
+
 from app.database.database import SessionLocal
 
+APP_PATH = os.path.dirname(os.path.realpath(__file__))
+STATIC_PATH = os.path.join(APP_PATH, "static")
+TEMPLATES_PATH = os.path.join(APP_PATH, "templates")
+
 # Dependency
 def get_db():
     db = SessionLocal()

app/main.py

@@ -7,17 +7,13 @@
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
+from routers import event
+from dependencies import STATIC_PATH, TEMPLATES_PATH
 
 app = FastAPI()
 
-app_path = os.path.dirname(os.path.realpath(__file__))
-static_path = os.path.join(app_path, "static")
-templates_path = os.path.join(app_path, "templates")
-
-app.mount("/static", StaticFiles(directory=static_path), name="static")
-templates = Jinja2Templates(directory=templates_path)
-
-app.include_router(agenda.router)
+app.mount("/static", StaticFiles(directory=STATIC_PATH), name="static")
+templates = Jinja2Templates(directory=TEMPLATES_PATH)
 
 
 @app.get("/")
@@ -30,7 +26,6 @@ def home(request: Request):
 
 @app.get("/profile")
 def profile(request: Request):
-
     # Get relevant data from database
     upcouming_events = range(5)
     current_username = "Chuck Norris"
@@ -40,3 +35,7 @@ def profile(request: Request):
         "username": current_username,
         "events": upcouming_events
     })
+
+
+app.include_router(event.router)
+app.include_router(agenda.router)

app/routers/event.py

@@ -0,0 +1,17 @@
+from fastapi import APIRouter, Request
+from fastapi.templating import Jinja2Templates
+
+from dependencies import TEMPLATES_PATH
+
+templates = Jinja2Templates(directory=TEMPLATES_PATH)
+
+router = APIRouter(
+    prefix="/event",
+    tags=["event"],
+    responses={404: {"description": "Not found"}},
+)
+
+
+@router.get("/edit")
+async def eventedit(request: Request):
+    return templates.TemplateResponse("eventedit.html", {"request": request})

app/static/eventedit.css

@@ -0,0 +1,58 @@
+html,
+body {
+	height: 100%;
+	min-width: max-content;
+	max-width: -moz-available;
+    max-width: -webkit-fill-available;
+    max-width: fill-available;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+}
+
+#event_edit_tabs {
+	height: 100%;
+	flex: 1;
+}
+
+.tab-pane {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.form_row,
+.form_row_start,
+.form_row_end {
+	display: flex
+}
+
+.form_row {
+	flex: 1;
+	min-height: 2.25em;
+	max-height: 3.25em;
+}
+
+.form_row.textarea {
+	flex: 4;
+	max-height: 19em;
+}
+
+input[type="text"],
+input[type="date"],
+textarea,
+.form_row_start {
+	flex: 1;
+}
+
+input[type="submit"] {
+	width: 100%;
+}

app/templates/event_details_form_tab.html

@@ -0,0 +1,48 @@
+<div class="form_row">
+    <input type="text" name="title" placeholder="Event Title" required>
+</div>
+
+<div class="form_row">
+    <input type="date" name="start_date" placeholder="Start Date" required>
+    <input type="time" name="start_time" placeholder="Start Time" required>
+</div>
+
+<div class="form_row">
+    <input type="date" name="end_date" placeholder="End Date" required>
+    <input type="time" name="end_time" placeholder="End Time" required>
+</div>
+
+<div class="form_row">
+    <select name="location_type" required>
+        <option value="" disabled selected>Type</option>
+        <option value="vc_url">VC URL</option>
+        <option value="address">Address</option>
+    </select>
+    <input type="text" name="location" placeholder="VC URL/Location">
+</div>
+
+<div class="form_row textarea">
+    <textarea name="description" placeholder="Description"></textarea>
+</div>
+
+<div class="form_row">
+    <div class="form_row_start">
+        <select name="color">
+            <option value="red">Red</option>
+            <option value="green">Green</option>
+            <option value="blue">Blue</option>
+        </select>
+    </div>
+
+
+    <div class="form_row_end">
+        <select name="availability">
+            <option value="free">Free</option>
+            <option value="busy" selected>Busy</option>
+        </select>
+        <select name="privacy">
+            <option value="private">Private</option>
+            <option value="public" selected>Public</option>
+        </select>
+    </div>
+</div>

app/templates/eventedit.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Edit Event</title>
+        <link href="{{ url_for('static', path='/eventedit.css') }}" rel="stylesheet">
+    </head>
+    <body>
+        <form name="eventeditform" method="POST">
+            <!-- Temporary nav layout based on bootstrap -->
+            <ul class="nav nav-tabs" id="event_edit_nav" role="tablist">
+                <li class="nav-item">
+                    <a class="nav-link active" id="eventdetails-tab" data-toggle="tab" href="#eventdetails" role="tab"
+                        aria-controls="eventdetails" aria-selected="true">
+                    Event Details
+                    </a>
+                </li>
+                <!-- Copy commented section to add another navigation item -->
+                <!--    <li class="nav-item">-->
+                <!--        <a class="nav-link" id="(CHANGE_ME)-tab" data-toggle="tab" href="#(CHANGE_ME)" role="tab"-->
+                <!--           aria-controls="(CHANGE_ME)" aria-selected="true">-->
+                <!--            (CHANGE_ME)-->
+                <!--        </a>-->
+                <!--    </li>-->
+            </ul>
+            <div class="tab-content" id="event_edit_tabs">
+                <div class="tab-pane fade show active" id="eventdetails" role="tabpanel" aria-labelledby="eventdetails-tab">
+                    {% include "event_details_form_tab.html" %}
+                </div>
+                <!--    Copy commented section to add another tab-->
+                <!--    <div class="tab-pane fade" id="(CHANGE_ME)" role="tabpanel" aria-labelledby="(CHANGE_ME)-tab">-->
+                <!--        ADD INCLUDE HERE -->
+                <!--    </div>-->
+            </div>
+        <div class="form_row">
+            <input type="submit" value="Submit">
+        </div>
+        </form>
+    </body>
+</html>

requirements.txt

@@ -6,6 +6,7 @@ certifi==2020.12.5
 chardet==4.0.0
 click==7.1.2
 colorama==0.4.4
+coverage==5.3.1
 fastapi==0.63.0
 h11==0.12.0
 h2==4.0.0
@@ -23,6 +24,9 @@ py==1.10.0
 pydantic==1.7.3
 pyparsing==2.4.7
 pytest==6.2.1
+pytest-cov==2.10.1
+python-dotenv==0.15.0
+PyYAML==5.3.1
 python-dateutil==2.8.1
 requests==2.25.1
 six==1.15.0
@@ -32,5 +36,7 @@ toml==0.10.2
 typing-extensions==3.7.4.3
 urllib3==1.26.2
 uvicorn==0.13.3
+watchgod==0.6
+websockets==8.1
 wsproto==1.0.0
 zipp==3.4.0

tests/test_event.py

@@ -0,0 +1,11 @@
+from fastapi.testclient import TestClient
+
+from app.main import app
+
+client = TestClient(app)
+
+
+def test_eventedit():
+    response = client.get("/event/edit")
+    assert response.status_code == 200
+    assert b"Edit Event" in response.content