[scrobbles] Add note taking to webpages

vrobbler/templates/webpages/webpage_detail.html

@@ -16,12 +16,88 @@
 <script src="{% static 'js/recogito.min.js' %}"></script>
 <script type="text/javascript">
 (function() {
+    var latestScrobbleUuid = "{{ latest_scrobble_uuid|default:'' }}";
+    console.log('DEBUG: latestScrobbleUuid =', latestScrobbleUuid);
+    if (!latestScrobbleUuid) {
+        console.log('No latest scrobble UUID available');
+        return;
+    }
+
     var r = Recogito.init({
-    content: document.getElementById('article') // ID or DOM element
+        content: document.getElementById('article')
     });
 
-    // Add an event handler
-    r.on('createAnnotation', function(annotation) { /** **/ });
+    var notePositionRe = /\[start:(\d+)\|end:(\d+)\]$/;
+
+    function parseNote(noteStr) {
+        var match = noteStr.match(notePositionRe);
+        if (match) {
+            return {
+                text: noteStr.replace(notePositionRe, ''),
+                position: { start: parseInt(match[1]), end: parseInt(match[2]) }
+            };
+        }
+        return { text: noteStr, position: null };
+    }
+
+    var existingNotes = [
+        {% for note in latest_scrobble_notes %}
+        (function() {
+            var parsed = parseNote("{{ note|escapejs }}");
+            if (parsed.position) {
+                return {
+                    "@context": "http://www.w3.org/ns/anno.jsonld",
+                    "@type": "Annotation",
+                    "body": [{"@type": "TextualBody", "value": parsed.text}],
+                    "target": {"selector": [{"type": "TextPositionSelector", "start": parsed.position.start, "end": parsed.position.end}]}
+                };
+            }
+            return null;
+        })(),
+        {% endfor %}
+    ].filter(function(n) { return n !== null; });
+
+    if (existingNotes.length > 0) {
+        r.setAnnotations(existingNotes);
+    }
+
+    r.on('createAnnotation', function(annotation) {
+        var note = annotation.body && annotation.body[0] ? annotation.body[0].value : null;
+        if (!note) {
+            return;
+        }
+
+        var position = null;
+        if (annotation.target && annotation.target.selector) {
+            var selector = annotation.target.selector;
+            for (var i = 0; i < selector.length; i++) {
+                if (selector[i].type === 'TextPositionSelector') {
+                    position = { start: selector[i].start, end: selector[i].end };
+                    break;
+                }
+            }
+        }
+
+        console.log('Sending fetch to:', '/api/v1/scrobbles/' + latestScrobbleUuid + '/');
+        console.log('CSRF token:', '{{ csrf_token }}');
+        fetch('/api/v1/scrobbles/' + latestScrobbleUuid + '/', {
+            method: 'PATCH',
+            credentials: 'same-origin',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': '{{ csrf_token }}'
+            },
+            body: JSON.stringify({ note: note, note_position: position })
+        })
+        .then(response => {
+            if (!response.ok) {
+                console.error('Failed to save note:', response.status, response.statusText);
+            }
+        })
+        .catch(error => {
+            console.error('Error saving note:', error);
+        });
+    });
 })();
 </script>
 {% endblock %}