Catcrafts/Crafter.CppDOM
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

website progress

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

256
examples/Website/frontend/main.cpp Normal file
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
}
});
}

17
examples/Website/frontend/project.json Normal file
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"
}
]
}
]
}

1
examples/Website/frontend/run.sh Executable file
View file

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