website progress

This commit is contained in:
Jorijn van der Graaf 2025-11-12 15:58:04 +01:00
commit e9afde5216
7 changed files with 360 additions and 6 deletions

View file

@ -1,8 +1,3 @@
/*
* Enhanced Event Handling Demo
* This example showcases all available event types in Crafter.CppDOM
*/
import Crafter.CppDOM;
using namespace Crafter;
import std;

View file

@ -7,7 +7,6 @@ int main(){
SetInnerHTML(body, "<h1>Fetch Example</h1><p>Testing HTTP requests...</p>");
Fetch("https://httpbin.org/get", [body](std::string result){
std::cout << "callback recieved2" << std::endl;
if (!result.empty()) {
SetInnerHTML(body, "<h1>Fetch Example</h1><p>Response: " + result + "</p>");
} else {

View file

@ -0,0 +1,70 @@
/*
Crafter® Build
Copyright (C) 2025 Catcrafts®
Catcrafts.net
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License version 3.0 as published by the Free Software Foundation;
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
*/
import Crafter.Network;
import std;
using namespace Crafter;
struct Note {
std::uint32_t id;
std::string content;
};
std::vector<Note> notes;
int next_id = 1;
int main() {
ListenerHTTP listener(3000, {
{"/createNote", [&](const HTTPRequest& request) {
if(request.method == "OPTIONS") {
std::cout << CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}}) << std::endl;
return CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}});
}
std::uint32_t id = next_id++;
notes.emplace_back(id, request.body);
return CreateResponseHTTP("200 OK", {{"Content-Type", "application/json"}, {"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}}, std::format("{}", id));
}},
{"/deleteNote", [&](const HTTPRequest& request) {
if(request.method == "OPTIONS") {
std::cout << CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}}) << std::endl;
return CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}});
}
int idToRemove = std::stoi(request.body);
notes.erase(std::remove_if(notes.begin(), notes.end(),
[idToRemove](Note note) {
return note.id == idToRemove;
}),
notes.end());
return CreateResponseHTTP("200 OK", {{"Content-Type", "application/json"}, {"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}});
}},
{"/getNotes", [&](const HTTPRequest& request) {
if(request.method == "OPTIONS") {
std::cout << CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}}) << std::endl;
return CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}});
}
std::string result;
for(const Note& note : notes) {
result += std::format("{}\n{}\n\n", note.id, note.content);
}
return CreateResponseHTTP("200 OK", {{"Content-Type", "application/json"}, {"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}}, result);
}}
});
listener.Listen();
}

View file

@ -0,0 +1,16 @@
{
"name": "website-backend",
"configurations": [
{
"name": "executable",
"implementations": ["main"],
"libs": ["crafter-thread"],
"dependencies": [
{
"path":"/home/jorijn/repos/Crafter/Crafter.Network/project.json",
"configuration":"lib-debug"
}
]
}
]
}

View file

@ -0,0 +1,256 @@
import Crafter.CppDOM;
import std;
using namespace Crafter;
using namespace Crafter::CppDOMBindings;
// Structure to represent a note
struct Note {
std::uint32_t id;
std::string content;
};
void RenderNotes();
// Global vector to store notes
std::vector<Note> notes;
// Create the head section
HtmlElementView* head = new HtmlElementView("head", R"(
<title>Note Taking App</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.app-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.input-section {
margin-bottom: 20px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
}
.input-section textarea {
width: 100%;
height: 80px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
}
.input-section button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
.input-section button:hover {
background-color: #45a049;
}
.notes-section h2 {
color: #555;
border-bottom: 2px solid #4CAF50;
padding-bottom: 5px;
}
.notes-list {
margin-top: 15px;
}
.note-item {
padding: 15px;
margin-bottom: 10px;
background-color: #f0f8ff;
border-left: 4px solid #4CAF50;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.note-content {
flex-grow: 1;
word-wrap: break-word;
}
.delete-btn {
background-color: #f44336;
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
margin-left: 10px;
}
.delete-btn:hover {
background-color: #da190b;
}
#error, #loading {
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
#error {
background-color: #ffebee;
color: #c62828;
border: 1px solid #ffcdd2;
}
#loading {
background-color: #e3f2fd;
color: #1565c0;
border: 1px solid #bbdefb;
}
</style>
)");
// Create the body section
HtmlElementView* body = new HtmlElementView("body", R"(
<div class="app-container">
<h1>📝 Note Taking App</h1>
<div class="input-section">
<h2>Add New Note</h2>
<textarea id="noteInput" placeholder="Enter your note here..."></textarea>
<br>
<button id="addNoteBtn">Add Note</button>
</div>
<div id="error"></div>
<div id="loading"></div>
<div class="notes-section">
<h2>Your Notes</h2>
<div id="notesContainer"></div>
</div>
</div>
)");
HtmlElementView* addNoteBtn = new HtmlElementView("addNoteBtn");
HtmlElementView* noteInput = new HtmlElementView("noteInput");
// Function to fetch all notes from the backend
void FetchNotes() {
HtmlElementView loadingIndicator("loading");
loadingIndicator.SetInnerHTML("<p>Loading notes...</p>");
// Make HTTP request to backend
Fetch("http://localhost:3000/getNotes", [](std::string content) {
// Parse response - each note is separated by \n\n
notes.clear();
// Simple parsing of note data
std::uint_fast32_t pos = 0;
std::uint_fast32_t prevPos = 0;
while ((pos = content.find('\n', prevPos)) != std::string::npos) {
if (pos > prevPos) {
// Extract ID
std::string idStr = content.substr(prevPos, pos - prevPos);
std::uint_fast32_t id = std::stoul(idStr);
// Find the next newline for content
std::uint_fast32_t contentStart = pos + 1;
std::uint_fast32_t contentEnd = content.find('\n', contentStart);
if (contentEnd != std::string::npos) {
std::string noteContent = content.substr(contentStart, contentEnd - contentStart);
notes.push_back({id, noteContent});
}
}
prevPos = content.find('\n', pos) + 1;
if (prevPos >= content.length()) break;
}
// Update UI with notes
//RenderNotes();
});
}
// Function to add a new note via the backend
void AddNote(const std::string& content) {
if (content.empty()) return;
HtmlElementView loadingIndicator("loading");
loadingIndicator.SetInnerHTML("<p>Saving note...</p>");
// Make POST request to create note
Fetch("http://localhost:3000/createNote", content, [](std::string content) {});
}
// Function to delete a note via the backend
void DeleteNote(std::uint32_t id) {
HtmlElementView loadingIndicator("loading");
loadingIndicator.SetInnerHTML("<p>Deleting note...</p>");
// Make POST request to delete note
Fetch("http://localhost:3000/deleteNote", std::to_string(id), [](std::string content) {
FetchNotes();
});
}
// Function to render all notes to the DOM
void RenderNotes() {
HtmlElementView notesContainer("notesContainer");
if (notes.empty()) {
notesContainer.SetInnerHTML("<p>No notes yet. Add one below!</p>");
return;
}
std::string html = "<div class='notes-list'>";
for (const Note& note : notes) {
html += std::format(
R"(<div class='note-item' id='note-{}'>
<div class='note-content'>{}</div>
<button class='delete-btn' onclick='DeleteNote({})'>Delete</button>
</div>)",
note.id, note.content, note.id
);
}
html += "</div>";
notesContainer.SetInnerHTML(html);
// Add event listeners to delete buttons
for (const Note& note : notes) {
HtmlElementView deleteBtn(std::format("note-{}-delete", note.id));
deleteBtn.AddClickListener([id = note.id](MouseEvent event) {
DeleteNote(id);
});
}
}
std::string* currentNoteValue = new std::string();
// Main function
int main() {
// Initialize the app
FetchNotes();
// Add input listener to track textarea changes
noteInput->AddInputListener([&](InputEvent event) {
*currentNoteValue += event.data;
std::cout << *currentNoteValue << std::endl;
});
// Add click listener to add note button
addNoteBtn->AddClickListener([&](MouseEvent event) {
std::cout << "click!" << std::endl;
std::cout << *currentNoteValue << std::endl;
// Use the captured value from input event
if (!currentNoteValue->empty()) {
AddNote(*currentNoteValue);
// Clear the textarea by setting its value to empty string
noteInput->SetInnerHTML("");
*currentNoteValue = ""; // Reset the stored value
}
});
}

View file

@ -0,0 +1,17 @@
{
"name": "main",
"configurations": [
{
"name": "executable",
"implementations": ["main"],
"target": "wasm32-wasi",
"debug" : true,
"dependencies": [
{
"path":"../../../project.json",
"configuration":"lib-debug"
}
]
}
]
}

View file

@ -0,0 +1 @@
caddy file-server --listen :8080 --root bin/executable