Added gallery database and refactored src-manager
This commit is contained in:
@@ -27,9 +27,14 @@
|
||||
<li>
|
||||
<a href="/new-news.html">New News</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/new-gallery-image.html">New Gallery Image</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button hx-get="/api/news-list" hx-trigger="click" hx-swap="innerHTML" hx-target="#entries">Refresh</button>
|
||||
<h4>News</h4>
|
||||
|
||||
<button hx-get="/api/news-list" hx-trigger="click" hx-swap="innerHTML" hx-target="#news-entries">Refresh</button>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -40,11 +45,33 @@
|
||||
<td>Actions</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="entries" hx-confirm='Are you sure you want to delete this news?' hx-target="closest tr" hx-swap="outerHTML"></tbody>
|
||||
<tbody id="news-entries" hx-confirm='Are you sure you want to delete this news?' hx-target="closest tr" hx-swap="outerHTML"></tbody>
|
||||
</table>
|
||||
|
||||
<h4>Gallery Images</h4>
|
||||
|
||||
<button hx-get="/api/gallery-image/list" hx-trigger="click" hx-swap="innerHTML" hx-target="#image-entries">Refresh</button>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>Image Path</td>
|
||||
<td>Caption</td>
|
||||
<td>Actions</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="image-entries" hx-confirm='Are you sure you want to delete this image? (Actual data will not deleted.)' hx-target="closest tr" hx-swap="outerHTML"></tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
htmx.ajax('GET', '/api/news-list', {target: '#entries', swap: 'innerHTML'});
|
||||
const buttons = document.getElementsByTagName('button');
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
for (const btn of buttons) {
|
||||
btn.click();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
51
src-manager/pages/new-gallery-image.html
Normal file
51
src-manager/pages/new-gallery-image.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Content Manager - new gallery image</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
|
||||
<style>
|
||||
form fieldset {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
#new-news {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#preview {
|
||||
border: black solid 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="new-gallery-image">
|
||||
<h3></h3>
|
||||
<form id="create-entry" hx-post="/api/gallery-image" hx-swap="none">
|
||||
<fieldset>
|
||||
<legend>Create Entry</legend>
|
||||
<label for="imagePath">Image Path:</label>
|
||||
<input type="text" name="imagePath" id="imagePath">
|
||||
<label for="caption">Caption of Image:</label>
|
||||
<input type="text" name="caption" id="caption">
|
||||
</fieldset>
|
||||
<button id="submit-button" type="submit">Create Entry</button>
|
||||
<a href="/index.html">
|
||||
<button role="none" type="button">
|
||||
Cancel
|
||||
</button>
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const submitButton = document.getElementById('submit-button');
|
||||
|
||||
submitButton.addEventListener('click', () => {
|
||||
window.location.href = "/index.html";
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
@@ -3,6 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Content Manager - new news</title>
|
||||
<link rel="stylesheet" href="/styles/markdown.css">
|
||||
<link rel="stylesheet" href="/styles/color-pallet.css">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<style>
|
||||
@@ -56,12 +58,12 @@
|
||||
<a href="/index.html"><button role="none" type="button">Cancel</button></a>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div id="preview">
|
||||
<h3>Preview</h3>
|
||||
<h4>Card Content</h4>
|
||||
<div id="preview-card-content"></div>
|
||||
<h4>Article</h4>
|
||||
<div id="preview-article"></div>
|
||||
<div id="preview-article" class="markdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
67
src-manager/pages/update-gallery-image.html
Normal file
67
src-manager/pages/update-gallery-image.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Content Manager - update gallery image</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<style>
|
||||
form fieldset {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
#new-news {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#preview {
|
||||
border: black solid 1px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="new-gallery-image">
|
||||
<h3></h3>
|
||||
<form id="create-entry" hx-put="/api/gallery-image" hx-swap="none">
|
||||
<fieldset>
|
||||
<legend>Create Entry</legend>
|
||||
<label for="imagePath">Image Path:</label>
|
||||
<input type="text" name="imagePath" id="imagePath">
|
||||
<label for="caption">Caption of Image:</label>
|
||||
<input type="text" name="caption" id="caption">
|
||||
|
||||
<input type="hidden" name="target" id="targetValue" value="test">
|
||||
</fieldset>
|
||||
<button id="submit-button" type="submit">Update Entry</button>
|
||||
<a href="/index.html">
|
||||
<button role="none" type="button">
|
||||
Cancel
|
||||
</button>
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const submitButton = document.getElementById('submit-button');
|
||||
const imagePathInput = document.getElementById('imagePath');
|
||||
const captionInput = document.getElementById('caption');
|
||||
const targetInput = document.getElementById('targetValue');
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const targetEntry = urlParams.get('target');
|
||||
|
||||
axios.get('/api/gallery-image', {params: {target: targetEntry}})
|
||||
.then((response) => {
|
||||
targetInput.value = response.data.id;
|
||||
imagePathInput.value = response.data.imagePath;
|
||||
captionInput.value = response.data.caption;
|
||||
})
|
||||
.catch((err) => {console.error(err)});
|
||||
|
||||
submitButton.addEventListener('click', () => {
|
||||
window.location.href = "/index.html";
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
@@ -3,6 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Content Manager - update news</title>
|
||||
<link rel="stylesheet" href="/styles/markdown.css">
|
||||
<link rel="stylesheet" href="/styles/color-pallet.css">
|
||||
<script src="https://unpkg.com/htmx.org@2.0.2" integrity="sha384-Y7hw+L/jvKeWIRRkqWYfPcvVxHzVzn5REgzbawhxAuQGwX1XWe70vji+VSeHOThJ" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
@@ -59,12 +61,12 @@
|
||||
<a href="/index.html"><button role="none" type="button">Cancel</button></a>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div id="preview">
|
||||
<h3>Previews</h3>
|
||||
<h4>Card Content</h4>
|
||||
<div id="preview-card-content"></div>
|
||||
<h4>Article</h4>
|
||||
<div id="preview-article"></div>
|
||||
<div id="preview-article" class="markdown"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user