222 lines
9.0 KiB
HTML
222 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AudioRecorder Test</title>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.recording-item {
|
|
border: 1px solid #ccc;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 8px;
|
|
background: #f9f9f9;
|
|
}
|
|
button {
|
|
margin: 5px;
|
|
padding: 8px 16px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: #f0f0f0; }
|
|
button.delete { background: #ff6b6b; color: white; }
|
|
button.edit { background: #4dabf7; color: white; }
|
|
button.save { background: #51cf66; color: white; }
|
|
input, textarea {
|
|
width: 100%;
|
|
padding: 8px;
|
|
margin: 5px 0;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<h1>AudioRecorder Edit/Delete Test</h1>
|
|
|
|
<div v-if="recordings.length === 0" style="padding: 20px; text-align: center; color: #666;">
|
|
No recordings. Click "Add Test Recording" to start testing.
|
|
</div>
|
|
|
|
<div v-for="(recording, index) in recordings" :key="recording.id" class="recording-item">
|
|
<div v-if="!recording.editing">
|
|
<h3>{{ recording.title || `Recording ${index + 1}` }}</h3>
|
|
<p>{{ recording.description || 'No description' }}</p>
|
|
<p><small>Created: {{ new Date(recording.createdAt).toLocaleString() }}</small></p>
|
|
|
|
<button @click="editRecording(index)" class="edit">Edit</button>
|
|
<button @click="deleteRecording(index)" class="delete">Delete</button>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<input
|
|
v-model="recording.editTitle"
|
|
placeholder="Recording title..."
|
|
@keyup.enter="saveRecordingEdit(index)"
|
|
/>
|
|
<textarea
|
|
v-model="recording.editDescription"
|
|
placeholder="Recording description..."
|
|
rows="3"
|
|
></textarea>
|
|
|
|
<button @click="saveRecordingEdit(index)" class="save">Save</button>
|
|
<button @click="cancelRecordingEdit(index)">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #ccc;">
|
|
<button @click="addTestRecording" style="background: #339af0; color: white;">
|
|
Add Test Recording
|
|
</button>
|
|
<button @click="clearAllRecordings" style="background: #868e96; color: white;">
|
|
Clear All
|
|
</button>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; padding: 15px; background: #e9ecef; border-radius: 4px;">
|
|
<h3>Test Instructions:</h3>
|
|
<ol>
|
|
<li>Click "Add Test Recording" to create a recording</li>
|
|
<li>Click "Edit" on a recording - it should show input fields</li>
|
|
<li>Change the title/description and click "Save" - changes should persist</li>
|
|
<li>Click "Edit" again and then "Cancel" - changes should be discarded</li>
|
|
<li>Click "Delete" on a recording - it should show confirmation and then remove it</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref } = Vue;
|
|
|
|
createApp({
|
|
setup() {
|
|
const recordings = ref([]);
|
|
let nextId = 1;
|
|
|
|
const addTestRecording = () => {
|
|
recordings.value.push({
|
|
id: nextId++,
|
|
title: `Test Recording ${nextId - 1}`,
|
|
description: `This is a test recording created at ${new Date().toLocaleString()}`,
|
|
createdAt: new Date().toISOString(),
|
|
editing: false
|
|
});
|
|
};
|
|
|
|
const editRecording = (index) => {
|
|
console.log('Edit recording at index:', index);
|
|
const recording = recordings.value[index];
|
|
if (!recording) {
|
|
console.error('No recording found at index:', index);
|
|
return;
|
|
}
|
|
|
|
// Create new array to trigger reactivity
|
|
const newRecordings = [...recordings.value];
|
|
newRecordings[index] = {
|
|
...recording,
|
|
editing: true,
|
|
editTitle: recording.title || '',
|
|
editDescription: recording.description || ''
|
|
};
|
|
recordings.value = newRecordings;
|
|
console.log('Recording now in edit mode:', recordings.value[index].editing);
|
|
};
|
|
|
|
const saveRecordingEdit = (index) => {
|
|
console.log('Save recording edit at index:', index);
|
|
const recording = recordings.value[index];
|
|
if (!recording) {
|
|
console.error('No recording found at index:', index);
|
|
return;
|
|
}
|
|
|
|
// Create new array to trigger reactivity
|
|
const newRecordings = [...recordings.value];
|
|
newRecordings[index] = {
|
|
...recording,
|
|
title: recording.editTitle || '',
|
|
description: recording.editDescription || '',
|
|
editing: false
|
|
};
|
|
// Remove edit properties
|
|
delete newRecordings[index].editTitle;
|
|
delete newRecordings[index].editDescription;
|
|
|
|
recordings.value = newRecordings;
|
|
console.log('Recording edit saved:', recordings.value[index]);
|
|
};
|
|
|
|
const cancelRecordingEdit = (index) => {
|
|
console.log('Cancel recording edit at index:', index);
|
|
const recording = recordings.value[index];
|
|
if (!recording) {
|
|
console.error('No recording found at index:', index);
|
|
return;
|
|
}
|
|
|
|
// Create new array to trigger reactivity
|
|
const newRecordings = [...recordings.value];
|
|
newRecordings[index] = {
|
|
...recording,
|
|
editing: false
|
|
};
|
|
// Remove edit properties
|
|
delete newRecordings[index].editTitle;
|
|
delete newRecordings[index].editDescription;
|
|
|
|
recordings.value = newRecordings;
|
|
console.log('Recording edit cancelled');
|
|
};
|
|
|
|
const deleteRecording = (index) => {
|
|
console.log('Delete recording at index:', index);
|
|
const recording = recordings.value[index];
|
|
if (!recording) {
|
|
console.error('No recording found at index:', index);
|
|
return;
|
|
}
|
|
|
|
const recordingName = recording.title || `Recording ${index + 1}`;
|
|
const confirmed = confirm(`Are you sure you want to delete "${recordingName}"?`);
|
|
if (!confirmed) {
|
|
console.log('Delete cancelled by user');
|
|
return;
|
|
}
|
|
|
|
// Create new array and remove item
|
|
const newRecordings = [...recordings.value];
|
|
newRecordings.splice(index, 1);
|
|
recordings.value = newRecordings;
|
|
|
|
console.log('Recording deleted. New length:', recordings.value.length);
|
|
};
|
|
|
|
const clearAllRecordings = () => {
|
|
recordings.value = [];
|
|
};
|
|
|
|
return {
|
|
recordings,
|
|
addTestRecording,
|
|
editRecording,
|
|
saveRecordingEdit,
|
|
cancelRecordingEdit,
|
|
deleteRecording,
|
|
clearAllRecordings
|
|
};
|
|
}
|
|
}).mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |