jasterv/sentences-crud
1
0
Fork 0
mirror of https://codeberg.org/JasterV/sentences-crud.git synced 2026-04-27 02:15:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

views done

Browse source
This commit is contained in:
JasterV 2021-07-25 03:15:10 +02:00
commit 7cd751caad
5 changed files with 103 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -10,7 +10,6 @@
### TODO
- Test sentences component
- Create static views
- aggregate script
## Author

26
src/components/view/router.ts
View file

@ -14,11 +14,7 @@ router.get('/sentences', async (req, res) => {
return res.render('list', { sentences, orderBy: orderBy ?? null, order })
})
router.get('/sentence/create', async (req, res) => {
const { text, category } = req.body
const id = await model.create({ text, category })
return res.redirect('/public/sentence/' + id)
})
router.get('/sentence/:id/delete', async (req, res) => {
const { id } = req.params
@ -26,13 +22,6 @@ router.get('/sentence/:id/delete', async (req, res) => {
return res.redirect('/public/sentences')
})
router.get('/sentence/:id/update', async (req, res) => {
const { id } = req.params
const { text, category } = req.body
const sentence: Sentence = await model.update(id, { text, category })
return res.render('sentence', { sentence })
})
router.get('/sentence/:id/edit', async (req, res) => {
const { id } = req.params
const sentence: Sentence = await model.getById(id)
@ -47,6 +36,19 @@ router.get('/sentence/:id', async (req, res) => {
router.get('/sentence', (_req, res) => res.render('form_sentence', { sentence: {} }))
router.post('/sentence/:id/edit', async (req, res) => {
const { id } = req.params
const { text, category } = req.body
const sentence: Sentence = await model.update(id, { text, category })
return res.render('sentence', { sentence })
})
router.post('/sentence', async (req, res) => {
const { text, category } = req.body
const id = await model.create({ text, category })
return res.redirect('/public/sentence/' + id)
})
// EJS views
router.get('/', (_req, res) => res.render('index'))

1
src/server.ts
View file

@ -13,6 +13,7 @@ const app = express()
app.set('view engine', 'ejs')
app.set('views', process.cwd() + '/src/views')
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use('/public', viewsRouter)
// translation api

80
src/views/form_sentence.ejs
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Sentences CRUD</title>
</head>
<body>
<form action="/public/sentence<%= sentence.id ? `/${sentence.id}/edit` : '/'%>" method="POST" class="d-flex flex-column mt-5 h-100 needs-validation" novalidate>
<h1 class="align-self-center">
<%= sentence.id ? "Edit " + sentence.id : "Create sentence" %>
</h1>
<div class="mt-5 col-md-4 mb-3 align-self-center">
<label for="text">Text sentence</label>
<input required type="text" name="text" class="form-control" id="text" placeholder="Write a sentence" value="<%= sentence.text || '' %>" />
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3 align-self-center">
<label for="category">Category</label>
<input required type="text" class="form-control" id="category"
placeholder="terror" name="category" value="<%= sentence.category || '' %>"/>
<div class="valid-feedback">Looks good!</div>
</div>
<button class="btn btn-primary align-self-center" type="submit">Submit</button>
</form>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
"use strict";
window.addEventListener(
"load",
function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName("needs-validation");
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(
forms,
function (form) {
form.addEventListener(
"submit",
function (event) {
const inputs = document.getElementsByTagName('input')
for(const input of inputs) {
input.value = input.value.trim()
}
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
}
);
},
false
);
})();
</script>
</body>
</html>

15
src/views/list.ejs
View file

@ -35,13 +35,14 @@
</div>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sort categories
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="/public/sentences?orderBy=category&order=asc">ASC</a>
<a class="dropdown-item" href="/public/sentences?orderBy=category&order=desc">DESC</a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Sort categories
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="/public/sentences?orderBy=category&order=asc">ASC</a></li>
<li><a class="dropdown-item" href="/public/sentences?orderBy=category&order=desc">DESC</a></li>
</ul>
</div>
</div>