Skip to content

Frontend and collaborative problems #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LauranceLin wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Frontend and collaborative problems #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bd6aafb
Front-end in user's view
LauranceLin Dec 2, 2023
c504790
Delete sql directory
LauranceLin Dec 2, 2023
71bbbf5
Add responder part
LauranceLin Dec 10, 2023
2a26211
Frontend refine
LauranceLin Dec 12, 2023
5558c20
Frontend Bug Fix
LauranceLin Dec 13, 2023
1dd15eb
Modify filter into url parameter based
LauranceLin Dec 13, 2023
0e0dbff
Fix event page
LauranceLin Dec 14, 2023
2297383
fix addevent
Dec 14, 2023
6f3bbff
Fix event page
LauranceLin Dec 16, 2023
672ebb3
placement fix
LauranceLin Dec 16, 2023
51e33ac
Delete assets directory
LauranceLin Dec 16, 2023
93a71cc
Fix placement
LauranceLin Dec 16, 2023
3806b3f
Add admin part
LauranceLin Dec 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 156 additions & 0 deletions frontend/addevent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Create Event </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='assets/css/main.css') }}" rel="stylesheet">
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('notifications', offset=0)}}"> FurAlert! </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('reported_events', offset=0) }}"> All Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('notifications', offset=0)}}"> Notifications </a>
</li>
<li class="nav-item">
<a class="nav-link active" id="create-event" aria-current="page" href="{{ url_for('add_event') }}"> Create Event </a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('subscription', offset=0) }}"> My Subscription </a>
</li>
<li class="nav-item">
<a class="nav-link" id="report-record" href="{{ url_for('reportrecord', offset=0) }}"> Report Record </a>
</li>
<li class="nav-item">
<a class="nav-link" id="respond-record" href="{{ url_for('respond_record', offset=0) }}" style="display: none;"> Respond Record </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#profileModal">
<img src="images/icon.png" alt="Icon" width="30" height="30">
</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Profile Modal -->
<div class="modal" id="profileModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> My Profile </h5>
</div>
<div class="modal-body">
<form>
<div class="row mb-3">
<label for="idInput" class="col form-label"> User ID </label>
<input type="text" class="col form-control" id="idInput" readonly>
</div>
<div class="row mb-3">
<label for="nameInput" class="col form-label"> Name </label>
<input type="text" class="col form-control" id="nameInput" readonly>
</div>
<div class="row mb-3">
<label for="emailInput" class="col form-label"> Email </label>
<input type="email" class="col form-control" id="emailInput" readonly>
</div>
<button type="button" class="btn btn-danger" id="logoutBtn"> Log out </button>
</form>
</div>
</div>
</div>
</div>

<!-- Create Event -->
<div class="container">
<div>
<form method="post" action="{{ url_for('add_event') }}" class="border p-4 rounded shadow">
<h3 class="mb-4"> Report An Event </h3>
<div class="row">
<label for="citySelect" class="col-auto col-form-label"> City </label>
<div class="col">
<select class="form-select" id="citySelect" name="city" required>
<option value="" selected disabled> 選擇城市 </option>
<option value="0"> 臺北市 </option>
<option value="1"> 新北市 </option>
</select>
</div>
</div>
<div class="row">
<label for="districtSelect" class="col-auto col-form-label"> District </label>
<div class="col">
<select class="form-select" id="districtSelect" name="district" required>
<option value="" selected disabled> 選擇行政區 </option>
</select>
</div>
</div>
<div class="row">
<label for="roadInput" class="col-auto col-form-label"> Road </label>
<div class="col">
<input type="text" class="form-control" id="roadInput" name="shortaddress" placeholder="輸入路名" required>
</div>
</div>
<div class="row">
<label for="citySelect" class="col-auto col-form-label"> Animal </label>
<div class="col">
<div id="animalContainer"></div>
<p id="addAnimalBtn" style="border-radius: 5px; border: #cbcbcb solid 0.5px; width: 12%; padding-top: 0.2%; padding-bottom: 0.2%; text-align: center;"> + Add an animal </p>
</div>
</div>
<div class="row">
<label for="eventTypeSelect" class="col-auto col-form-label"> Type </label>
<div class="col">
<select class="form-select" id="eventTypeSelect" name="eventtype" required>
<option value="" selected disabled> 選擇事件種類 </option>
<option value="0"> 動物路殺 </option>
<option value="1"> 動物阻礙交通 </option>
<option value="2"> 流浪動物 </option>
<option value="3"> 動物傷人 </option>
<option value="4"> 虐待動物 </option>
<option value="5"> 危險動物目擊 </option>
<option value="6"> 其他 </option>
</select>
</div>
</div>
<div class="row">
<label for="descriptionInput" class="col-auto col-form-label"> Description </label>
<div class="col">
<input type="text" class="form-control" id="descriptionInput" name="shortdescription" placeholder="輸入事件描述（選填）">
</div>
</div>
<div class="row">
<label for="imageUrlInput" class="col-auto col-form-label"> Image Url </label>
<div class="col">
<input type="url" class="form-control" id="imageUrlInput" name="iamgeurl" placeholder="輸入事件照片網址（選填）">
</div>
</div>
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-start">
<button type="button" onclick="resetForm()" class="btn btn-secondary me-2"> Cancel </button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='assets/js/main.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/addevent.js') }}"></script>
</body>
</html>
189 changes: 189 additions & 0 deletions frontend/admin_events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> All events </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='assets/css/main.css') }}" rel="stylesheet">
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{url_for('admin_events', offset=0)}}"> FurAlert! </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ url_for('admin_events', offset=0) }}"> All Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{url_for('user_list', offset=0)}}"> User List </a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('responder_list', offset=0) }}"> Responder List </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#profileModal">
<img src="images/icon.png" alt="Icon" width="30" height="30">
</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Profile Modal -->
<div class="modal" id="profileModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> My Profile </h5>
</div>
<div class="modal-body">
<form>
<div class="row mb-3">
<label for="idInput" class="col form-label"> Admin ID </label>
<input type="text" class="col form-control" id="idInput" readonly>
</div>
<div class="row mb-3">
<label for="emailInput" class="col form-label"> Email </label>
<input type="email" class="col form-control" id="emailInput" readonly>
</div>
<button type="button" class="btn btn-danger" id="logoutBtn"> Log out </button>
</form>
</div>
</div>
</div>
</div>

<!-- Events -->
<div class="container mt-5">
<div class="row">
<!-- Filter -->
<h3> Select a channel > </h3>
<form id="filterForm" class="col-md-3">
<div>
<label for="locationSelect" class="form-label"> Location </label>
<select class="form-select" id="locationSelect">
<option value="" selected> All </option>
<option value="中正區"> 中正區 </option>
<option value="大同區"> 大同區 </option>
<option value="中山區"> 中山區 </option>
<option value="松山區"> 松山區 </option>
<option value="大安區"> 大安區 </option>
<option value="萬華區"> 萬華區 </option>
<option value="信義區"> 信義區 </option>
<option value="士林區"> 士林區 </option>
<option value="北投區"> 北投區 </option>
<option value="內湖區"> 內湖區 </option>
<option value="南港區"> 南港區 </option>
<option value="文山區"> 文山區 </option>
<option value="萬里區"> 萬里區 </option>
<option value="金山區"> 金山區 </option>
<option value="板橋區"> 板橋區 </option>
<option value="汐止區"> 汐止區 </option>
<option value="深坑區"> 深坑區 </option>
<option value="石碇區"> 石碇區 </option>
<option value="瑞芳區"> 瑞芳區 </option>
<option value="平溪區"> 平溪區 </option>
<option value="雙溪區"> 雙溪區 </option>
<option value="貢寮區"> 貢寮區 </option>
<option value="新店區"> 新店區 </option>
<option value="坪林區"> 坪林區 </option>
<option value="烏來區"> 烏來區 </option>
<option value="永和區"> 永和區 </option>
<option value="中和區"> 中和區 </option>
<option value="土城區"> 土城區 </option>
<option value="三峽區"> 三峽區 </option>
<option value="樹林區"> 樹林區 </option>
<option value="鶯歌區"> 鶯歌區 </option>
<option value="三重區"> 三重區 </option>
<option value="新莊區"> 新莊區 </option>
<option value="泰山區"> 泰山區 </option>
<option value="林口區"> 林口區 </option>
<option value="蘆洲區"> 蘆洲區 </option>
<option value="五股區"> 五股區 </option>
<option value="八里區"> 八里區 </option>
<option value="淡水區"> 淡水區 </option>
<option value="三芝區"> 三芝區 </option>
<option value="石門區"> 石門區 </option>
</select>
</div>
<div>
<label for="animalSelect" class="form-label"> Animal </label>
<select class="form-select" id="animalSelect">
<option value="" selected> 所有 </option>
<option value="0"> 狗 </option>
<option value="1"> 貓 </option>
<option value="2"> 鳥 </option>
<option value="3"> 蛇 </option>
<option value="4"> 鹿 </option>
<option value="5"> 猴子 </option>
<option value="6"> 魚 </option>
<option value="7"> 熊 </option>
<option value="8"> 其他 </option>
</select>
</div>
<div>
<label for="eventTypeSelect" class="form-label"> EventType </label>
<select class="form-select" id="eventTypeSelect">
<option value="" selected> 所有 </option>
<option value="0"> 動物路殺 </option>
<option value="1"> 動物阻礙交通 </option>
<option value="2"> 流浪動物 </option>
<option value="3"> 動物傷人 </option>
<option value="4"> 虐待動物 </option>
<option value="5"> 危險動物目擊 </option>
<option value="6"> 其他 </option>
</select>
</div>
<button class="btn btn-primary" id="confirmBtn"> Confirm </button>
</form>

<!-- Event list -->
<div id="eventList" class="col-md-9">
<h3> All Events </h3>
<!-- Events -->
{% for event in event_list %}
<div class="event justify-content-center " style="border: #d7dee7 solid; border-radius: 10px; padding: 1%; margin: 1%;">
<div class="event-header">
<p> Event &raquo; &emsp; {{ event['city'] }} / {{ event['district'] }} /
{% if event['animals']|length == 1 %}
{{ event['animals'][0] }}
{% elif event['animals']|length == 2 %}
{{ event['animals'][0] }} / {{ event['animals'][1] }}
{% else %}
{{ event['animals'][0] }} / {{ event['animals'][1] }} / ...
{% endif %}
/ {{ event['eventtype'] }}
</p>
</div>
<div class="event-details">
<p>
&emsp;&emsp;&emsp;&emsp;&emsp; Published at {{ event['createdat'] }} &emsp; Status {{ event['status'] }} &emsp;
<a href="{{url_for('event', eventid=event['eventid']) }}" style="float: right; margin: 1%;"> Read more &raquo; </a>
</p>
</div>
</div>
{% endfor %}

<!-- Pagination -->
<div class="pagination justify-content-center">
<a {% if offset == 0 %} href="#" {% else %} href="{{ url_for('admin_events', offset = offset - 1) }}" {% endif %}> 上一頁 </a>
<span> Page {{ offset + 1 }} </span>
<a {% if offset == 100 %} href="#" {% else %} href="{{ url_for('nadmin_events', offset = offset + 1) }}" {% endif %}> 下一頁 </a>
</div>
</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ url_for('static', filename='assets/js/admin_main.js') }}"></script>
<script src="{{ url_for('static', filename='assets/js/admin_events.js') }}"></script>
</body>
</html>
Loading