added tailwind and created basic user model.

This commit is contained in:
christian 2024-06-24 10:15:01 +02:00
parent b011f0c2d4
commit 048a09988b
8 changed files with 121 additions and 70 deletions

View File

@ -0,0 +1,60 @@
# Generated by Django 5.0.6 on 2024-06-24 07:33
import datetime
import django.db.models.deletion
import django.utils.timezone
from django.conf import settings
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('api', '0001_initial'),
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
]
operations = [
migrations.CreateModel(
name='User',
fields=[
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
('username', models.CharField(max_length=100)),
('email', models.EmailField(max_length=254, unique=True)),
('password', models.CharField(max_length=100)),
],
),
migrations.AddField(
model_name='todo',
name='assigned_to',
field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL),
),
migrations.AddField(
model_name='todo',
name='completed_at',
field=models.DateTimeField(blank=True, null=True),
),
migrations.AddField(
model_name='todo',
name='created_at',
field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
preserve_default=False,
),
migrations.AddField(
model_name='todo',
name='due_date',
field=models.DateField(default=datetime.datetime(2024, 6, 24, 7, 33, 19, 896417, tzinfo=datetime.timezone.utc)),
preserve_default=False,
),
migrations.AddField(
model_name='todo',
name='frequency',
field=models.IntegerField(default=1),
preserve_default=False,
),
migrations.AddField(
model_name='todo',
name='updated_at',
field=models.DateTimeField(auto_now=True),
),
]

View File

@ -4,7 +4,21 @@ from django.db import models
class Todo(models.Model):
title = models.CharField(max_length=100)
description = models.TextField()
frequency = models.IntegerField()
due_date = models.DateField()
assigned_to = models.ForeignKey('auth.User', on_delete=models.CASCADE, null=True, blank=True)
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
completed = models.BooleanField(default=False)
completed_at = models.DateTimeField(null=True, blank=True)
def __str__(self):
return self.title
class User(models.Model):
username = models.CharField(max_length=100)
email = models.EmailField(unique=True)
password = models.CharField(max_length=100)
def __str__(self):
return self.username

View File

@ -20,6 +20,9 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"tailwindcss": "^3.4.4"
}
},
"node_modules/@adobe/css-tools": {

View File

@ -39,5 +39,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.4.4"
}
}

View File

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

View File

@ -1,24 +1,32 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from "react";
type Todo = {
id: number;
title: string;
description: string;
completed: boolean;
};
function setCompleted(todo: Todo) {}
function App() {
const [todos, setTodos] = useState<Todo[]>([]);
useEffect(() => {
fetch("http://localhost:8000/api/todo")
.then((res) => res.json())
.then((data) => setTodos(data));
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div className="container mx-auto flex flex-col items-center justify-center h-screen gap-4">
{todos.map((todo) => (
<div className="shadow-sm border rounded-sm p-4" key={todo.id}>
<p>{todo.title}</p>
<p>{todo.description}</p>
{todo.completed && <p>Completed</p>}
<button>Complete</button>
</div>
))}
</div>
);
}

View File

@ -1,13 +1,3 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}