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 LabelImport from './Settings/LabelImport.vue'
|
||||||
import MacroAssignments from './Settings/MacroAssignments.vue'
|
import MacroAssignments from './Settings/MacroAssignments.vue'
|
||||||
import MacroImport from './Settings/MacroImport.vue'
|
import MacroImport from './Settings/MacroImport.vue'
|
||||||
import { Head } from '@inertiajs/vue3'
|
import { Head, router } from '@inertiajs/vue3'
|
||||||
import { onMounted, ref } from 'vue'
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
settings: { type: Object, default: () => ({}) },
|
settings: { type: Object, default: () => ({}) },
|
||||||
|
|
@ -22,6 +22,7 @@ const submenus = [
|
||||||
{ key: 'macros', label: 'Makro-Import' },
|
{ key: 'macros', label: 'Makro-Import' },
|
||||||
{ key: 'labels', label: 'Label-Import' },
|
{ key: 'labels', label: 'Label-Import' },
|
||||||
{ key: 'agenda', label: 'Agenda' },
|
{ key: 'agenda', label: 'Agenda' },
|
||||||
|
{ key: 'ccli', label: 'CCLI Import' },
|
||||||
]
|
]
|
||||||
|
|
||||||
const activeSubmenu = ref('assignments')
|
const activeSubmenu = ref('assignments')
|
||||||
|
|
@ -37,6 +38,35 @@ function switchSubmenu(key) {
|
||||||
activeSubmenu.value = key
|
activeSubmenu.value = key
|
||||||
window.location.hash = 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -122,6 +152,76 @@ function switchSubmenu(key) {
|
||||||
v-if="activeSubmenu === 'agenda'"
|
v-if="activeSubmenu === 'agenda'"
|
||||||
:settings="settings"
|
: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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue