website progress
This commit is contained in:
parent
6b15c9e20c
commit
e9afde5216
7 changed files with 360 additions and 6 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
70
examples/Website/backend/main.cpp
Normal file
70
examples/Website/backend/main.cpp
Normal 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();
|
||||
}
|
||||
16
examples/Website/backend/project.json
Normal file
16
examples/Website/backend/project.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
256
examples/Website/frontend/main.cpp
Normal file
256
examples/Website/frontend/main.cpp
Normal 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
17
examples/Website/frontend/project.json
Normal 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
1
examples/Website/frontend/run.sh
Executable file
|
|
@ -0,0 +1 @@
|
|||
caddy file-server --listen :8080 --root bin/executable
|
||||
Loading…
Add table
Add a link
Reference in a new issue