Bare bones backend. Frontend just starting.
This commit is contained in:
Ryan Pandya
@@ -0,0 +1,27 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h2>
|
||||
Category Editor
|
||||
</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Code</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{%for activity in activities %}
|
||||
<tr class="activity-{{activity.code}} color-{{activity.color}}" hx-target="closest tr" hx-swap="beforeend">
|
||||
<td>{{ activity.code }}</td>
|
||||
<td>{{ activity.name }}</td>
|
||||
<td hx-get="/get-color-form/{{activity.activity_id}}">{{ activity.color }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,51 @@
|
||||
:root{
|
||||
--black: #273036;
|
||||
--red: #c71634;
|
||||
--cyan: #005744;
|
||||
--pink: #ff65ae;
|
||||
--blue: #00a9b3;
|
||||
--green: #189749;
|
||||
--yellow: #fff336;
|
||||
--orange: #ff6d01;
|
||||
--purple: #5b3ab1;
|
||||
--darkred: #ff2816;
|
||||
--lime: #bfff55;
|
||||
}
|
||||
tr.color-black{
|
||||
background: var(--black);
|
||||
}
|
||||
tr.color-red{
|
||||
background: var(--red);
|
||||
}
|
||||
tr.color-blue{
|
||||
background: var(--blue);
|
||||
}
|
||||
tr.color-green{
|
||||
background: var(--green);
|
||||
}
|
||||
tr.color-purple{
|
||||
background: var(--purple);
|
||||
}
|
||||
tr.color-lime{
|
||||
background: var(--lime);
|
||||
color: var(--black);
|
||||
}
|
||||
tr.color-cyan{
|
||||
background: var(--cyan);
|
||||
}
|
||||
tr.color-darkred{
|
||||
background: var(--darkred);
|
||||
}
|
||||
tr.color-pink{
|
||||
background: var(--pink);
|
||||
}
|
||||
tr.color-orange{
|
||||
background: var(--orange);
|
||||
}
|
||||
tr.color-yellow{
|
||||
background: var(--yellow);
|
||||
color: var(--black);
|
||||
}
|
||||
h2{
|
||||
color:green;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<div id="color-chooser">
|
||||
{% for color in [
|
||||
"black", "red", "cyan", "blue", "green",
|
||||
"purple", "yellow", "darkred", "orange",
|
||||
"pink", "lime"] %}
|
||||
<div
|
||||
class="color-choice color-{{color}}"
|
||||
hx-post="/change-color"
|
||||
hx-vals='{"activity_id": "{{activity.activity_id}}", "color": "{{color}}"}'
|
||||
hx-target="body"
|
||||
>
|
||||
{{ color.capitalize() }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<td class="activity-{{hour.activity.code}}">
|
||||
<input
|
||||
id="update-hour-{{hour.hour_id}}"
|
||||
class="update-entry-form"
|
||||
type="text"
|
||||
value="{{hour.activity.code}}"
|
||||
hx-trigger="change"
|
||||
hx-post="/update-entry"
|
||||
>
|
||||
</input>
|
||||
</td>
|
||||
<script language="javascript">
|
||||
document.querySelector("#update-hour-{{hour.hour_id}}").focus()
|
||||
</script>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Life Tracker Expanded</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||
<!-- HTMX -->
|
||||
<script src="https://unpkg.com/htmx.org@1.5.0"></script>
|
||||
<link rel="stylesheet" href="/static/ltx.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Life Tracker, Expanded</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Day</th>
|
||||
{% for m in ["am", "pm"]%}
|
||||
<th scope="col">12 {{m}}</th>
|
||||
{% for t in range(1,12) %}
|
||||
<th scope="col">{{t}} {{m}}</th>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="new-book" hx-target="closest tr" hx-swap="outerHTML swap:0.5s">
|
||||
{%for book in books%}
|
||||
<tr>
|
||||
<td>{{book.Book.title}}</td>
|
||||
<td>{{book.Author.name}}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary"
|
||||
hx-get="/get-edit-form/{{book.Book.book_id}}">
|
||||
Edit Title
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button hx-delete="/delete/{{book.Book.book_id}}" class="btn btn-primary">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{%endfor%}
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" hx-boost="true">
|
||||
<head>
|
||||
<title>Life Tracker Expanded</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||
<!-- HTMX -->
|
||||
<script src="https://unpkg.com/htmx.org@1.5.0"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />
|
||||
<link rel="stylesheet" href="/colors.css"/>
|
||||
<link rel="stylesheet" href="/static/ltx.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1 hx-get="/" hx-target="body" hx-push-url="true">Life Tracker, Expanded</h1>
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div id="container"></div>
|
||||
|
||||
<script language="javascript">
|
||||
const container = document.querySelector('#container');
|
||||
const data = [
|
||||
{ id: 1, name: 'Ted Right', address: '' },
|
||||
{ id: 2, name: 'Frank Honest', address: '' },
|
||||
{ id: 3, name: 'Joan Well', address: '' },
|
||||
{ id: 4, name: 'Gail Polite', address: '' },
|
||||
{ id: 5, name: 'Michael Fair', address: '' },
|
||||
];
|
||||
|
||||
const hot = new Handsontable(container, {
|
||||
data,
|
||||
colHeaders: false,
|
||||
height: 'auto',
|
||||
width: 'auto',
|
||||
minSpareRows: 1,
|
||||
licenseKey: 'non-commercial-and-evaluation'
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,56 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<h2>
|
||||
{{ days[0].date.strftime("%h %d") }}
|
||||
–
|
||||
{{ days[-1].date.strftime("%h %d") }}
|
||||
</h2>
|
||||
<div id="table">
|
||||
<div class="cell upcase">Date</div>
|
||||
<div class="cell upcase">Day</div>
|
||||
{% for m in ["am", "pm"]%}
|
||||
{% for t in [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] %}
|
||||
{% if now.strftime("%P") == m and now.strftime("%l").strip() == "{}".format(t) %}
|
||||
<div class="now cell upcase">
|
||||
{% else %}
|
||||
<div class="cell upcase">
|
||||
|
||||
{% endif %}
|
||||
{{t}} {{m}}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
<div class="cell">Mood</div>
|
||||
<div class="cell">Comments</div>
|
||||
|
||||
{%for day in days%}
|
||||
|
||||
{% if day.date.strftime("%x") == now.strftime("%x") %}
|
||||
<div class="now">
|
||||
{% else %}
|
||||
<div>
|
||||
{% endif %}
|
||||
{{day.date.strftime("%m/%d")}}
|
||||
</div>
|
||||
{% if day.date.strftime("%x") == now.strftime("%x") %}
|
||||
<div class="now">
|
||||
{% else %}
|
||||
<div>
|
||||
{% endif %}
|
||||
{{day.date.strftime("%a").upper()}}
|
||||
</div>
|
||||
{%for hour in day.hours%}
|
||||
<div class="activity-{{hour.activity.code}}"
|
||||
hx-get="/get-activity-form/{{hour.hour_id}}">
|
||||
{% if hour.activity.code != -1 %}
|
||||
{{hour.activity.code}}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="cell">{{day.mood}}</div>
|
||||
|
||||
<div class="day-note">{{day.note}}</div>
|
||||
{%endfor%}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,57 @@
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<h2>
|
||||
{{ days[0].date.strftime("%h %d") }}
|
||||
–
|
||||
{{ days[-1].date.strftime("%h %d") }}
|
||||
</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Date</th>
|
||||
<th scope="col">Day</th>
|
||||
{% for m in ["am", "pm"]%}
|
||||
{% for t in [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] %}
|
||||
{% if now.strftime("%P") == m and now.strftime("%l").strip() == "{}".format(t) %}
|
||||
<th scope="col" class="now">
|
||||
{% else %}
|
||||
<th scope="col">
|
||||
|
||||
{% endif %}
|
||||
{{t}} {{m}}
|
||||
</th>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody hx-target="closest td" hx-swap="outerHTML swap:0.5s">
|
||||
{%for day in days%}
|
||||
<tr>
|
||||
{% if day.date.strftime("%x") == now.strftime("%x") %}
|
||||
<td class="now">
|
||||
{% else %}
|
||||
<td>
|
||||
{% endif %}
|
||||
{{day.date.strftime("%m/%d")}}
|
||||
</td>
|
||||
{% if day.date.strftime("%x") == now.strftime("%x") %}
|
||||
<td class="now">
|
||||
{% else %}
|
||||
<td>
|
||||
{% endif %}
|
||||
{{day.date.strftime("%a").upper()}}
|
||||
</td>
|
||||
{%for hour in day.hours%}
|
||||
<td class="activity-{{hour.activity.code}}"
|
||||
hx-get="/get-activity-form/{{hour.hour_id}}">
|
||||
{% if hour.activity.code != -1 %}
|
||||
{{hour.activity.code}}
|
||||
{% endif %}
|
||||
</td>
|
||||
{% endfor %}
|
||||
<td class="day-note">{{day.note}}</td>
|
||||
</tr>
|
||||
{%endfor%}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user