150 lines
3.5 KiB
Go
150 lines
3.5 KiB
Go
package http
|
|
|
|
import "html/template"
|
|
|
|
var listTemplateParsed = template.Must(
|
|
template.New("courses").
|
|
Parse(listTemplate),
|
|
)
|
|
|
|
const listTemplate = `{{define "courses"}}
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Courses</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
header {
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 10px;
|
|
}
|
|
header h1 {
|
|
margin: 0;
|
|
}
|
|
nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
nav li {
|
|
display: inline;
|
|
margin-right: 10px;
|
|
}
|
|
nav a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
h1, h2, h3 {
|
|
margin-top: 0;
|
|
}
|
|
p {
|
|
margin-bottom: 10px;
|
|
}
|
|
.main-course {
|
|
background-color: #3B4252;
|
|
color: #E5E9F0;
|
|
text-align: center;
|
|
}
|
|
.sub-course {
|
|
background-color: #4C566A;
|
|
color: #ECEFF4;
|
|
}
|
|
.course-plate {
|
|
background-color: #f2f2f2;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.course-plate a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
}
|
|
.course-plate a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.editable-text {
|
|
cursor: pointer;
|
|
}
|
|
.editable-text.editing {
|
|
border: 1px solid #000;
|
|
padding: 5px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Courses</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/">Main page</a></li>
|
|
<li><a href="/about">About us</a></li>
|
|
<li><a href="/help">Help</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
{{range $category := .Categories}}
|
|
<h2 class="main-course">Category {{$category.Name}}</h2>
|
|
<p> Course Description: {{$category.Description}}</p>
|
|
{{range $subcategory := $category.Subcategories}}
|
|
<div>
|
|
<h2 class="sub-course"> Subcategory: {{$subcategory.Name}}</h2>
|
|
<p>Subcategory Description: {{$subcategory.Description}}</p>
|
|
{{range $course := $subcategory.Courses}}
|
|
<div class="course-plate">
|
|
<h3><a href="/courses/{{$course.ID}}">{{$course.Name}}</a></h3>
|
|
<p>Description: <div id="editable-text-{{$course.ID}}" class="editable-text" contenteditable=false>{{or $course.Description "..."}}</div></p>
|
|
<p>Full price: {{$course.FullPrice}}</p>
|
|
<p>Discount: {{$course.Discount}}</p>
|
|
<p>Thematic: {{$course.Thematic}}</p>
|
|
<p>Learning type: {{$course.LearningType}}</p>
|
|
<p>Duration: {{$course.Duration}}</p>
|
|
<p>Starts at: {{$course.StartsAt}}</p>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
{{end}}
|
|
|
|
<script>
|
|
const editableTexts = document.querySelectorAll('.editable-text');
|
|
let isEditing = false;
|
|
|
|
editableTexts.forEach(function(editableText) {
|
|
editableText.addEventListener('click', function() {
|
|
if (!isEditing) {
|
|
editableText.contentEditable = 'true';
|
|
editableText.className += ' editing';
|
|
isEditing = true;
|
|
}
|
|
});
|
|
|
|
editableText.addEventListener('keydown', function(event) {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
const text = editableText.innerText;
|
|
const id = editableText.id.replace('editable-text-', ''); // Extract the ID from the element's ID
|
|
|
|
// Send a POST request with JSON data
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/updatedesc', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/json');
|
|
xhr.send(JSON.stringify({ text, id }));
|
|
|
|
editableText.contentEditable = 'false';
|
|
editableText.className = 'editable-text';
|
|
isEditing = false;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}`
|