fr/fuel-stats
fr/fuel-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added: favicon, Dashboard, Habits list, some styles, dashboard redirect

Browse Source
This commit is contained in:
Filip Rojek 2024-12-27 02:06:32 +01:00
parent d33d233f0f
commit 2847231376
17 changed files with 266 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
TODO.md
View File

@ -6,6 +6,13 @@
- [ ] edit user data - change password, mail... - [ ] edit user data - change password, mail...
## Core of the app ## Core of the app
- [ ] Habits list - [ ] header and navbar
- [ ] dashboard
- [x] css
- [ ] its just plain
- [ ] graphs
- [x] Habits list
- [ ] css
- [ ] Habits create - [ ] Habits create
- [ ] validate cron input
- [ ] Habits track - [ ] Habits track

16
app/controllers/DashboardController.php Normal file
View File

@ -0,0 +1,16 @@
<?php
class DashboardController extends Controller {
public function index() {
$habit = new Habit();
$habits = $habit->getHabitsByUser($_SESSION['user']['id']);
$this->view('dashboard/index', [
'title' => 'Dashboard',
'habits' => $habits,
]);
}
public function reroute(){
$this->redirect('/dashboard');
}
}

9
app/controllers/HabitController.php
View File

@ -2,7 +2,9 @@
class HabitController extends Controller { class HabitController extends Controller {
public function index() { public function index() {
// Display the list of habits (to be implemented later) $habit = new Habit();
$habits = $habit->getHabitsByUser($_SESSION['user']['id']);
$this->view('habits/index', ['title' => 'Habits', 'habits' => $habits]);
} }
public function create() { public function create() {
@ -17,15 +19,12 @@ class HabitController extends Controller {
} }
if ($frequency === 'Custom') { if ($frequency === 'Custom') {
var_dump($_POST);
$daysOfWeek = $_POST['days_of_week'] ?? []; $daysOfWeek = $_POST['days_of_week'] ?? [];
$daysOfMonth = $_POST['days_of_month'] ?? '*'; $daysOfMonth = $_POST['days_of_month'] ?? '*';
$months = $_POST['months'] ?? '*'; $months = $_POST['months'] ?? '*';
// Combine into crontab-like string // Combine into crontab-like string
$customFrequency = implode(',', $daysOfWeek) . " $daysOfMonth $months"; $customFrequency = implode(',', $daysOfWeek) . " $daysOfMonth $months";
var_dump($customFrequency);
} }
$habit = new Habit(); $habit = new Habit();
@ -38,7 +37,7 @@ class HabitController extends Controller {
]); ]);
if ($result) { if ($result) {
//$this->redirect('/habits'); $this->redirect('/habits');
} else { } else {
$this->view('habits/create', ['error' => 'Failed to create habit.']); $this->view('habits/create', ['error' => 'Failed to create habit.']);
} }

14
app/models/Habit.php
View File

@ -29,4 +29,18 @@ class Habit {
return false; return false;
} }
} }
public function getHabitsByUser($userId) {
$stmt = $this->db->prepare("SELECT id, title, frequency, custom_frequency, reward_points, created_at FROM habits WHERE user_id = ?");
$stmt->bind_param("i", $userId);
$stmt->execute();
$result = $stmt->get_result();
$habits = [];
while ($row = $result->fetch_assoc()) {
$habits[] = $row;
}
return $habits;
}
} }

3
app/views/auth/signin.php
View File

@ -1,5 +1,6 @@
<link rel="stylesheet" href="/css/login.css"> <link rel="stylesheet" href="/css/login.css">
<section class="signin"> <link rel="stylesheet" href="/css/form.css">
<section class="form signin">
<div class="header-form"> <div class="header-form">
<img src="/img/logo.jpg" alt="Habit Tracker Logo"> <img src="/img/logo.jpg" alt="Habit Tracker Logo">
<h1>Sign in to Habit Tracker</h1> <h1>Sign in to Habit Tracker</h1>

3
app/views/auth/signup.php
View File

@ -1,5 +1,6 @@
<link rel="stylesheet" href="/css/login.css"> <link rel="stylesheet" href="/css/login.css">
<section class="signin"> <link rel="stylesheet" href="/css/form.css">
<section class="form signup">
<div class="header-form"> <div class="header-form">
<img src="/img/logo.jpg" alt="Habit Tracker Logo"> <img src="/img/logo.jpg" alt="Habit Tracker Logo">
<h1>Sign up to Habit Tracker</h1> <h1>Sign up to Habit Tracker</h1>

45
app/views/dashboard/index.php
View File

@ -1,3 +1,44 @@
<h1>Welcome <?= $_SESSION['user']['username']?>!</h1> <link rel="stylesheet" href="/css/dashboard.css">
<a href="/habits/create">Create new Habit</a> <section class="dashboard">
<h1>Welcome, <?= htmlspecialchars($_SESSION['user']['username']) ?>!</h1>
<a href="/habits/create" class="btn-primary">Create new habit!</a>
<div class="card-wrapper">
<section class="card upcoming">
<h2>Upcoming</h2>
<div class="habit">
<b>Habit Title</b>
<p>Frequency</p>
<p>Reward points</p>
</div>
</section>
<section class="card recent">
<h2>Recent</h2>
<div class="habit">
<b>Habit Title</b>
<p>Frequency</p>
<p>Reward points</p>
</div>
</section>
<section class="card missed">
<h2>Missed</h2>
<div class="habit">
<b>Habit Title</b>
<p>Frequency</p>
<p>Reward points</p>
</div>
</section>
<section class="card history-graph">
<h2>Graph of History</h2>
</section>
<section class="card streak">
<h2>Streak</h2>
<p>You're current streak is 123 days</p>
<p>Good job!</p>
</section>
</div>
</section>

49
app/views/habits/create.php
View File

@ -1,5 +1,7 @@
<section class="habit-create"> <link rel="stylesheet" href="/css/form.css">
<h1><?= $this->get('title', 'Create Habit') ?></h1> <link rel="stylesheet" href="/css/habits_create.css">
<section class="form habit-create">
<h1 class="header-form"><?= $this->get('title', 'Create Habit') ?></h1>
<?php if ($this->get('error')): ?> <?php if ($this->get('error')): ?>
<div class="error" style="color: red; margin-bottom: 1rem;"> <div class="error" style="color: red; margin-bottom: 1rem;">
@ -19,29 +21,50 @@
</select> </select>
<div id="custom-frequency" style="display: none;"> <div id="custom-frequency" style="display: none;">
<label>Days of the Week:</label> <label id="lbl_dow">Days of the Week:</label>
<input type="checkbox" name="days_of_week[]" value="1"> Monday <div class="dow_chb_wrapper">
<input type="checkbox" name="days_of_week[]" value="2"> Tuesday <label for="dow_mon">Monday</label>
<input type="checkbox" name="days_of_week[]" value="3"> Wednesday <input type="checkbox" name="days_of_week[]" id="dow_mon" value="1">
<input type="checkbox" name="days_of_week[]" value="4"> Thursday </div>
<input type="checkbox" name="days_of_week[]" value="5"> Friday <div class="dow_chb_wrapper">
<input type="checkbox" name="days_of_week[]" value="6"> Saturday <label for="dow_tue">Tuesday</label>
<input type="checkbox" name="days_of_week[]" value="7"> Sunday <input type="checkbox" name="days_of_week[]" id="dow_tue" value="2">
</div>
<div class="dow_chb_wrapper">
<label for="dow_wed">Wednesday</label>
<input type="checkbox" name="days_of_week[]" id="dow_wed" value="3">
</div>
<div class="dow_chb_wrapper">
<label for="dow_thu">Thursday</label>
<input type="checkbox" name="days_of_week[]" id="dow_thu" value="4">
</div>
<div class="dow_chb_wrapper">
<label for="dow_fri">Friday</label>
<input type="checkbox" name="days_of_week[]" id="dow_fri" value="5">
</div>
<div class="dow_chb_wrapper">
<label for="dow_sat">Saturday</label>
<input type="checkbox" name="days_of_week[]" id="dow_sat" value="6">
</div>
<div class="dow_chb_wrapper">
<label for="dow_sun">Sunday</label>
<input type="checkbox" name="days_of_week[]" id="dow_sun" value="7">
</div>
<label for="days_of_month">Days of the Month:</label> <label for="days_of_month" id="lbl_dom">Days of the Month:</label>
<input type="text" name="days_of_month" id="days_of_month" placeholder="1,15 (comma-separated)"> <input type="text" name="days_of_month" id="days_of_month" placeholder="1,15 (comma-separated)">
<label for="months">Months:</label> <label for="months">Months:</label>
<input type="text" name="months" id="months" placeholder="1,7,12 (comma-separated)"> <input type="text" name="months" id="months" placeholder="1,7,12 (comma-separated)">
</div> </div>
<button type="submit">Create Habit</button> <input type="submit" value="Create Habit">
</form> </form>
</section> </section>
<script> <script>
function toggleCustomFrequency(value) { function toggleCustomFrequency(value) {
const customFrequencyDiv = document.getElementById('custom-frequency'); const customFrequencyDiv = document.getElementById('custom-frequency');
customFrequencyDiv.style.display = value === 'Custom' ? 'block' : 'none'; customFrequencyDiv.style.display = value === 'Custom' ? 'flex' : 'none';
} }
</script> </script>

35
app/views/habits/index.php Normal file
View File

@ -0,0 +1,35 @@
<link rel="stylesheet" href="/css/habits_dashboard.css">
<section class="habits">
<?php if (empty($this->get('habits'))): ?>
<p>No habits yet. <a href="/habits/create">Create your first habit</a>.</p>
<?php else: ?>
<table>
<thead>
<tr>
<th>Title</th>
<th>Frequency</th>
<th>Custom Schedule</th>
<th>Points</th>
<th>Created At</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($this->get('habits') as $habit): ?>
<tr>
<td><?= htmlspecialchars($habit['title']) ?></td>
<td><?= htmlspecialchars($habit['frequency']) ?></td>
<td><?= htmlspecialchars($habit['custom_frequency'] ?? 'N/A') ?></td>
<td><?= htmlspecialchars($habit['reward_points']) ?></td>
<td><?= htmlspecialchars($habit['created_at']) ?></td>
<td>
<a href="/habits/edit?id=<?= $habit['id'] ?>">Edit</a> |
<a href="/habits/delete?id=<?= $habit['id'] ?>" onclick="return confirm('Are you sure you want to delete this habit?')">Delete</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<a href="/habits/create">Create new habit!</a>
<?php endif; ?>
</section>

1
app/views/layouts/base.php
View File

@ -6,6 +6,7 @@
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="/css/vars.css"> <link rel="stylesheet" href="/css/vars.css">
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
</head> </head>
<body> <body>
<header> <header>

22
public/css/dashboard.css Normal file
View File

@ -0,0 +1,22 @@
.dashboard {
display: flex;
flex-direction: column;
width: 100vw;
align-items: center;
}
.card-wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.card {
background-color: var(--clr-secondary);
border-radius: var(--border-radious);
border: var(--borderWidth-thin) solid var(--clr-border);
min-width: 17rem;
padding: 1rem;
}

19
public/css/login.css → public/css/form.css
View File

@ -1,4 +1,4 @@
.signin { .form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -10,19 +10,17 @@ body {
background-color: var(--clr-secondary); background-color: var(--clr-secondary);
} }
.signin .header-form { .form .header-form {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin-bottom: 2rem;
} }
.signin .header-form img { .form .header-form img {
height: 5rem; height: 5rem;
margin-bottom: 2rem;
} }
.signin form { .form form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem; padding: 1rem;
@ -32,7 +30,8 @@ body {
border: var(--borderWidth-thin) solid var(--clr-border); border: var(--borderWidth-thin) solid var(--clr-border);
} }
.signin form input { .form form input,
select {
background-color: var(--clr-secondary); background-color: var(--clr-secondary);
caret-color: white; caret-color: white;
color: white; color: white;
@ -42,12 +41,12 @@ body {
width: 15rem; width: 15rem;
} }
.signin form input[type="submit"] { .form form input[type="submit"] {
background-color: var(--clr-green); background-color: var(--clr-green);
color: white; color: white;
} }
.signin .error { .form .error {
width: 17rem; width: 17rem;
padding: 1rem; padding: 1rem;
background-color: var(--clr-danger-muted); background-color: var(--clr-danger-muted);
@ -57,6 +56,6 @@ body {
color: white; color: white;
} }
.signin small.error { .form small.error {
width: 15rem; width: 15rem;
} }

30
public/css/global.css
View File

@ -3,18 +3,30 @@
body { body {
font-family: "Open Sans", serif; font-family: "Open Sans", serif;
background-color: var(--clr-primary); background-color: var(--clr-primary);
color: white;
font-size: 14px;
} }
a, a {
p,
label,
h1 {
color: white; color: white;
} }
a, h1 {
p, margin-top: .5rem;
label, margin-bottom: 1rem;
div { }
font-size: 14px;
.btn-primary,
.btn-danger {
background-color: var(--clr-green);
padding: .5rem;
text-decoration: none;
cursor: pointer;
border-radius: var(--border-radious);
border: var(--borderWidth-thin) solid var(--clr-border);
}
.btn-danger {
background-color: var(--clr-danger-muted) !important;
border: var(--borderWidth-thin) solid var(--clr-border-danger);
} }

21
public/css/habits_create.css Normal file
View File

@ -0,0 +1,21 @@
.form form .dow_chb_wrapper input[type="checkbox"] {
width: 1rem;
}
.form form .dow_chb_wrapper {
display: flex;
justify-content: space-between;
}
#lbl_dow {
margin-bottom: .5rem;
}
#lbl_dom {
margin-top: .5rem;
}
#custom-frequency {
flex-direction: column;
justify-content: space-between;
}

26
public/css/habits_dashboard.css Normal file
View File

@ -0,0 +1,26 @@
.habits h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
.habits table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.habits table th,
.habits table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.habits a {
color: #007bff;
text-decoration: none;
}
.habits a:hover {
text-decoration: underline;
}

BIN
public/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

7
public/index.php
View File

@ -24,8 +24,11 @@ require_once models . 'Habit.php';
// Initialize router // Initialize router
$router = new Router(); $router = new Router();
if(!$_SESSION['user']) {
$router->add('/', 'HomeController@index'); $router->add('/', 'HomeController@index');
$router->add('/home', 'HomeController@home'); } else {
$router->add('/', 'DashboardController@reroute', ['RequireAuth']);
}
// auth routes // auth routes
$router->group('/auth', [], function ($router) { $router->group('/auth', [], function ($router) {
@ -35,7 +38,7 @@ $router->group('/auth', [], function ($router) {
}); });
// dashboard route // dashboard route
$router->add('/dashboard', 'HomeController@dashboard', ['RequireAuth']); $router->add('/dashboard', 'DashboardController@index', ['RequireAuth']);
// habits routes // habits routes
$router->group('/habits', ['RequireAuth'], function ($router) { $router->group('/habits', ['RequireAuth'], function ($router) {