feat(settings): add CCLI section with bookmarklet installer and default language
This commit is contained in:
Thorsten Bus
parent
3ec25bf70b
commit
f2b10a4cd7
|
|
@ -4,8 +4,8 @@ import AgendaSettings from './Settings/AgendaSettings.vue'
|
|||
import LabelImport from './Settings/LabelImport.vue'
|
||||
import MacroAssignments from './Settings/MacroAssignments.vue'
|
||||
import MacroImport from './Settings/MacroImport.vue'
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Head, router } from '@inertiajs/vue3'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
settings: { type: Object, default: () => ({}) },
|
||||
|
|
@ -22,6 +22,7 @@ const submenus = [
|
|||
{ key: 'macros', label: 'Makro-Import' },
|
||||
{ key: 'labels', label: 'Label-Import' },
|
||||
{ key: 'agenda', label: 'Agenda' },
|
||||
{ key: 'ccli', label: 'CCLI Import' },
|
||||
]
|
||||
|
||||
const activeSubmenu = ref('assignments')
|
||||
|
|
@ -37,6 +38,35 @@ function switchSubmenu(key) {
|
|||
activeSubmenu.value = key
|
||||
window.location.hash = key
|
||||
}
|
||||
|
||||
// Fetch bookmarklet href from the server endpoint
|
||||
const bookmarkletHref = ref('javascript:void(0)')
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await fetch(route('bookmarklets.ccli'))
|
||||
if (res.ok) {
|
||||
bookmarkletHref.value = await res.text()
|
||||
}
|
||||
} catch {
|
||||
// fallback: keep void
|
||||
}
|
||||
})
|
||||
|
||||
async function updateSetting(key, value) {
|
||||
try {
|
||||
await fetch(route('settings.update'), {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-XSRF-TOKEN': decodeURIComponent(document.cookie.split('; ').find(r => r.startsWith('XSRF-TOKEN='))?.split('=')[1] ?? ''),
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ key, value }),
|
||||
})
|
||||
} catch {
|
||||
// silent fail
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -122,6 +152,76 @@ function switchSubmenu(key) {
|
|||
v-if="activeSubmenu === 'agenda'"
|
||||
:settings="settings"
|
||||
/>
|
||||
|
||||
<!-- CCLI Import Settings -->
|
||||
<div v-if="activeSubmenu === 'ccli'" class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900">CCLI SongSelect Import</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
Importiere Songs direkt aus SongSelect in deine Song-Datenbank.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Default Translation Language -->
|
||||
<div class="rounded-lg border border-gray-200 p-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Standard-Übersetzungssprache
|
||||
</label>
|
||||
<p class="text-xs text-gray-500 mb-3">
|
||||
Wenn ein Song auf SongSelect in mehreren Sprachen verfügbar ist, wird diese Sprache als Übersetzung importiert.
|
||||
</p>
|
||||
<select
|
||||
data-testid="default-translation-language"
|
||||
:value="settings.default_translation_language || 'DE'"
|
||||
@change="updateSetting('default_translation_language', $event.target.value)"
|
||||
class="block w-48 rounded-md border-gray-300 text-sm shadow-sm focus:border-amber-500 focus:ring-amber-500"
|
||||
>
|
||||
<option value="DE">Deutsch (DE)</option>
|
||||
<option value="EN">Englisch (EN)</option>
|
||||
<option value="FR">Französisch (FR)</option>
|
||||
<option value="ES">Spanisch (ES)</option>
|
||||
<option value="NL">Niederländisch (NL)</option>
|
||||
<option value="IT">Italienisch (IT)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Bookmarklet Installer -->
|
||||
<div class="rounded-lg border border-blue-100 bg-blue-50 p-4">
|
||||
<h4 class="text-sm font-semibold text-blue-900 mb-2">Browser-Lesezeichen installieren</h4>
|
||||
<p class="text-sm text-blue-800 mb-3">
|
||||
Mit diesem Lesezeichen kannst du Songs direkt von SongSelect in pp-planer importieren — ohne Copy-Paste.
|
||||
</p>
|
||||
<ol class="text-sm text-blue-800 space-y-1 list-decimal list-inside mb-4">
|
||||
<li>Ziehe den Button unten in deine Lesezeichen-Leiste</li>
|
||||
<li>Öffne ein Lied auf <strong>songselect.ccli.com</strong> (du musst eingeloggt sein)</li>
|
||||
<li>Klicke das Lesezeichen — der Liedtext wird automatisch übertragen</li>
|
||||
<li>Klicke auf „Importieren" — fertig!</li>
|
||||
</ol>
|
||||
<p class="text-xs text-blue-600 mb-3">
|
||||
Lesezeichen-Leiste aktivieren: <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+Umschalt+B</kbd> (Mac: <kbd class="px-1 py-0.5 bg-blue-100 rounded">Cmd+Shift+B</kbd>)
|
||||
</p>
|
||||
<a
|
||||
data-testid="ccli-bookmarklet-drag-link"
|
||||
:href="bookmarkletHref"
|
||||
class="inline-flex items-center gap-2 rounded-md border border-blue-300 bg-white px-4 py-2 text-sm font-medium text-blue-700 shadow-sm cursor-grab hover:bg-blue-50"
|
||||
@click.prevent
|
||||
draggable="true"
|
||||
>
|
||||
📥 CCLI Import
|
||||
</a>
|
||||
<p class="mt-2 text-xs text-blue-500">
|
||||
Diesen Button in die Lesezeichen-Leiste ziehen.
|
||||
</p>
|
||||
|
||||
<!-- Troubleshooting -->
|
||||
<details class="mt-4">
|
||||
<summary class="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Was tun, wenn der Liedtext nicht erkannt wird?</summary>
|
||||
<p class="mt-2 text-xs text-blue-700">
|
||||
Falle zurück auf das manuelle Einfügen: Öffne das Lied auf SongSelect, drücke <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+A</kbd> dann <kbd class="px-1 py-0.5 bg-blue-100 rounded">Strg+C</kbd>, und klicke dann auf „Aus CCLI importieren" in der Song-Datenbank oder im Gottesdienst-Formular.
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue