95 lines
2.8 KiB
HTML
95 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Infinite Canvas with Cards</title>
|
|
<style>
|
|
canvas {
|
|
border: 1px solid #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="1900" height="1200"></canvas>
|
|
<script>
|
|
// Simulated temporary NoSQL database
|
|
const temporaryDB = {
|
|
cards: [
|
|
{ id: 1, text: "Card 1", x: 50, y: 50 }, // Initialize position for Card 1
|
|
{ id: 2, text: "Card 2", x: 200, y: 100 }, // Initialize position for Card 2
|
|
{ id: 3, text: "Card 3", x: 350, y: 150 } // Initialize position for Card 3
|
|
]
|
|
};
|
|
|
|
// Simulated central NoSQL database
|
|
const centralDB = {
|
|
cards: []
|
|
};
|
|
|
|
// Function to draw cards on canvas
|
|
function drawCards() {
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// temporaryDB.cards.forEach(card => {
|
|
// ctx.fillStyle = "#fff";
|
|
// ctx.fillRect(card.x, card.y, 100, 50);
|
|
// ctx.strokeRect(card.x, card.y, 100, 50);
|
|
// ctx.fillStyle = "#000";
|
|
// ctx.fillText(card.text, card.x + 10, card.y + 30);
|
|
// });
|
|
{% for task_card in task_cards %}
|
|
<li>
|
|
ctx.fillStyle = "##ff";
|
|
ctx.fillRect(card.x, card.y, 100, 50);
|
|
ctx.strokeRect(card.x, card.y, 100, 50);
|
|
ctx.fillStyle = "#000";
|
|
ctx.fillText({{ task_card.text }});
|
|
</li>
|
|
{# Access the 'text' field of the TaskCard model instance #}
|
|
{% endfor %}
|
|
}
|
|
|
|
|
|
// Function to handle card dragging
|
|
function dragCard(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mouseX = e.clientX - rect.left;
|
|
const mouseY = e.clientY - rect.top;
|
|
|
|
temporaryDB.cards.forEach(card => {
|
|
if (mouseX > card.x && mouseX < card.x + 100 &&
|
|
mouseY > card.y && mouseY < card.y + 50) {
|
|
card.x = mouseX - 50;
|
|
card.y = mouseY - 25;
|
|
drawCards();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to commit changes to central database
|
|
function commitChanges() {
|
|
centralDB.cards = temporaryDB.cards;
|
|
console.log("Changes committed to central database:", centralDB.cards);
|
|
}
|
|
|
|
// Initialize canvas and draw cards
|
|
const canvas = document.getElementById('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
drawCards();
|
|
|
|
// Event listener for card dragging
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
canvas.addEventListener('mousemove', dragCard);
|
|
});
|
|
|
|
canvas.addEventListener('mouseup', () => {
|
|
canvas.removeEventListener('mousemove', dragCard);
|
|
commitChanges();
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|