Crafter.CppDOM/examples/Website/frontend/main.cpp

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
        }
    });
}