Change: chapter lookup to be in modal

This commit is contained in:
Nicholas Wallace 2025-04-19 23:13:38 -07:00
parent 04fb8fa61d
commit 7e69713683
2 changed files with 19 additions and 6 deletions

View File

@ -141,10 +141,21 @@
</div> </div>
</template> </template>
<div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative"> <div class="w-full h-full max-h-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative">
<div v-if="!chapterData" class="flex p-20"> <div v-if="!chapterData" class="flex flex-col items-center justify-center p-20">
<ui-text-input-with-label v-model.trim="asinInput" label="ASIN" /> <div class="relative">
<ui-dropdown v-model="regionInput" :label="$strings.LabelRegion" small :items="audibleRegions" class="w-32 mx-1" /> <div class="flex items-end space-x-2">
<ui-btn small color="bg-primary" class="mt-5" @click="findChapters">{{ $strings.ButtonSearch }}</ui-btn> <ui-text-input-with-label v-model.trim="asinInput" label="ASIN" />
<ui-dropdown v-model="regionInput" :label="$strings.LabelRegion" small :items="audibleRegions" class="w-32" />
<ui-btn small color="bg-primary" @click="findChapters">{{ $strings.ButtonSearch }}</ui-btn>
</div>
<div class="absolute left-0 mt-1.5 text-error text-s h-5">
<p v-if="asinError">{{ asinError }}</p>
<p v-if="asinError">{{ $strings.MessageAsinCheck }}</p>
</div>
<div class="invisible h-5 mt-1 text-xs"></div>
</div>
</div> </div>
<div v-else class="w-full p-4"> <div v-else class="w-full p-4">
<div class="flex justify-between mb-4"> <div class="flex justify-between mb-4">
@ -249,6 +260,7 @@ export default {
findingChapters: false, findingChapters: false,
showFindChaptersModal: false, showFindChaptersModal: false,
chapterData: null, chapterData: null,
asinError: null,
showSecondInputs: false, showSecondInputs: false,
audibleRegions: ['US', 'CA', 'UK', 'AU', 'FR', 'DE', 'JP', 'IT', 'IN', 'ES'], audibleRegions: ['US', 'CA', 'UK', 'AU', 'FR', 'DE', 'JP', 'IT', 'IN', 'ES'],
hasChanges: false hasChanges: false
@ -546,14 +558,14 @@ export default {
this.findingChapters = true this.findingChapters = true
this.chapterData = null this.chapterData = null
this.asinError = null // used to show warning about audible vs amazon ASIN
this.$axios this.$axios
.$get(`/api/search/chapters?asin=${this.asinInput}&region=${this.regionInput}`) .$get(`/api/search/chapters?asin=${this.asinInput}&region=${this.regionInput}`)
.then((data) => { .then((data) => {
this.findingChapters = false this.findingChapters = false
if (data.error) { if (data.error) {
this.$toast.error(data.error) this.asinError = data.error
this.showFindChaptersModal = false
} else { } else {
console.log('Chapter data', data) console.log('Chapter data', data)
this.chapterData = data this.chapterData = data

View File

@ -705,6 +705,7 @@
"LabelYourProgress": "Your Progress", "LabelYourProgress": "Your Progress",
"MessageAddToPlayerQueue": "Add to player queue", "MessageAddToPlayerQueue": "Add to player queue",
"MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.", "MessageAppriseDescription": "To use this feature you will need to have an instance of <a href=\"https://github.com/caronc/apprise-api\" target=\"_blank\">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at <code>http://192.168.1.1:8337</code> then you would put <code>http://192.168.1.1:8337/notify</code>.",
"MessageAsinCheck": "Ensure you are using the ASIN from the correct Audible region, not Amazon.",
"MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.", "MessageBackupsDescription": "Backups include users, user progress, library item details, server settings, and images stored in <code>/metadata/items</code> & <code>/metadata/authors</code>. Backups <strong>do not</strong> include any files stored in your library folders.",
"MessageBackupsLocationEditNote": "Note: Updating the backup location will not move or modify existing backups", "MessageBackupsLocationEditNote": "Note: Updating the backup location will not move or modify existing backups",
"MessageBackupsLocationNoEditNote": "Note: The backup location is set through an environment variable and cannot be changed here.", "MessageBackupsLocationNoEditNote": "Note: The backup location is set through an environment variable and cannot be changed here.",