-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
start using prettier for frontend formatting
- Loading branch information
1 parent
9902e7a
commit b4ce6e0
Showing
9 changed files
with
265 additions
and
198 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "trailingComma": "es5", | ||
| "tabWidth": 4, | ||
| "semi": false, | ||
| "singleQuote": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,84 +1,93 @@ | ||
| <template> | ||
| <div v-if="nextCloudThumbs"> | ||
| <v-form @submit.prevent="onSubmit"> | ||
| <v-row> | ||
| <v-col | ||
| v-for="(nImage) in nextCloudThumbs" | ||
| :key="nImage.url" | ||
| class="d-flex child-flex nextcloud-thumb" | ||
| :class="{selectedImg: nImage.selected}" | ||
| cols="4" | ||
| > | ||
| <v-img | ||
| :src="nImage.src" | ||
| aspect-ratio="1" | ||
| @click="nImage.selected = !nImage.selected" | ||
| ></v-img> | ||
| </v-col> | ||
| </v-row> | ||
| <v-btn class="mt-2" type="submit" block>Submit</v-btn> | ||
| </v-form> | ||
| </div> | ||
| <div v-if="nextCloudThumbs"> | ||
| <v-form @submit.prevent="onSubmit"> | ||
| <v-row> | ||
| <v-col | ||
| v-for="nImage in nextCloudThumbs" | ||
| :key="nImage.url" | ||
| class="d-flex child-flex nextcloud-thumb" | ||
| :class="{ selectedImg: nImage.selected }" | ||
| cols="4" | ||
| > | ||
| <v-img | ||
| :src="nImage.src" | ||
| aspect-ratio="1" | ||
| @click="nImage.selected = !nImage.selected" | ||
| ></v-img> | ||
| </v-col> | ||
| </v-row> | ||
| <v-btn class="mt-2" type="submit" block>Submit</v-btn> | ||
| </v-form> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import Axios from 'axios' | ||
| Axios.defaults.baseURL = '/api' | ||
| import { nextcloudPhotosThumbnailUrls, joplinNoteImages, MyDiaryImageRead } from '@/api' | ||
| import { ref, watch, watchEffect } from 'vue'; | ||
| import { | ||
| nextcloudPhotosThumbnailUrls, | ||
| joplinNoteImages, | ||
| MyDiaryImageRead, | ||
| } from '@/api' | ||
| import { ref, watch, watchEffect } from 'vue' | ||
| const props = defineProps<{ | ||
| dt: string; | ||
| joplinNoteId?: string; | ||
| dt: string | ||
| joplinNoteId?: string | ||
| }>() | ||
| interface INextCloudThumb { | ||
| url: string; | ||
| src: string; | ||
| selected: boolean; | ||
| url: string | ||
| src: string | ||
| selected: boolean | ||
| } | ||
| const nextCloudThumbs = ref<INextCloudThumb[]>([]) | ||
| const diaryNoteImages = ref<MyDiaryImageRead[]>([]) | ||
| async function fetchImageUrls() { | ||
| const imgUrls = (await nextcloudPhotosThumbnailUrls(props.dt)).data | ||
| nextCloudThumbs.value = imgUrls.map((url => { | ||
| return { | ||
| url: url, | ||
| src: `/api/nextcloud/thumbnail_img?url=${url}`, | ||
| selected: false | ||
| } | ||
| })) | ||
| const imgUrls = (await nextcloudPhotosThumbnailUrls(props.dt)).data | ||
| nextCloudThumbs.value = imgUrls.map((url) => { | ||
| return { | ||
| url: url, | ||
| src: `/api/nextcloud/thumbnail_img?url=${url}`, | ||
| selected: false, | ||
| } | ||
| }) | ||
| } | ||
| async function fetchJoplinNoteImages() { | ||
| diaryNoteImages.value = [] | ||
| if (props.joplinNoteId) { | ||
| diaryNoteImages.value = (await joplinNoteImages(props.joplinNoteId)).data | ||
| } | ||
| diaryNoteImages.value = [] | ||
| if (props.joplinNoteId) { | ||
| diaryNoteImages.value = ( | ||
| await joplinNoteImages(props.joplinNoteId) | ||
| ).data | ||
| } | ||
| } | ||
| watch(props, fetchImageUrls, { immediate: true }) | ||
| watch(props, fetchJoplinNoteImages, { immediate: true }) | ||
| watchEffect(() => { | ||
| const existingUrls = diaryNoteImages.value.map((item) => item.nextcloud_path) | ||
| nextCloudThumbs.value.forEach((item) => item.selected = existingUrls.includes(item.url)) | ||
| const existingUrls = diaryNoteImages.value.map( | ||
| (item) => item.nextcloud_path | ||
| ) | ||
| nextCloudThumbs.value.forEach( | ||
| (item) => (item.selected = existingUrls.includes(item.url)) | ||
| ) | ||
| }) | ||
| watchEffect(() => { | ||
| const numSelected = nextCloudThumbs.value.filter((t => t.selected)).length | ||
| console.log(`${numSelected} selected!`) | ||
| console.log(nextCloudThumbs.value) | ||
| const numSelected = nextCloudThumbs.value.filter((t) => t.selected).length | ||
| console.log(`${numSelected} selected!`) | ||
| console.log(nextCloudThumbs.value) | ||
| }) | ||
| function onSubmit() { | ||
| const numSelected = nextCloudThumbs.value.filter((t => t.selected)).length | ||
| console.log(`submitted! ${numSelected} selected!`) | ||
| // TODO: implement add thumbnail to joplin | ||
| const numSelected = nextCloudThumbs.value.filter((t) => t.selected).length | ||
| console.log(`submitted! ${numSelected} selected!`) | ||
| // TODO: implement add thumbnail to joplin | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| .nextcloud-thumb { | ||
| opacity: 50%; | ||
| opacity: 50%; | ||
| } | ||
| .nextcloud-thumb.selectedImg { | ||
| opacity: 100%; | ||
| opacity: 100%; | ||
| } | ||
| </style> | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,62 @@ | ||
| <template> | ||
| <v-container> | ||
| <v-list> | ||
| <v-list-item> | ||
| <PerformSongsDropdown v-if="performSongsList" :items="performSongsList" /> | ||
| </v-list-item> | ||
| <v-list-item> | ||
| <PerformSongsRandomButton v-if="performSongsList" :items="performSongsList" :current-id="Number(props.id)" /> | ||
| </v-list-item> | ||
| </v-list> | ||
| <PerformSongCard :perform-song="performSong" :image-url="imageUrl" /> | ||
| <PerformSongEdit :perform-song="performSong" /> | ||
| </v-container> | ||
| <v-container> | ||
| <v-list> | ||
| <v-list-item> | ||
| <PerformSongsDropdown | ||
| v-if="performSongsList" | ||
| :items="performSongsList" | ||
| /> | ||
| </v-list-item> | ||
| <v-list-item> | ||
| <PerformSongsRandomButton | ||
| v-if="performSongsList" | ||
| :items="performSongsList" | ||
| :current-id="Number(props.id)" | ||
| /> | ||
| </v-list-item> | ||
| </v-list> | ||
| <PerformSongCard :perform-song="performSong" :image-url="imageUrl" /> | ||
| <PerformSongEdit :perform-song="performSong" /> | ||
| </v-container> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import PerformSongCard from '@/components/PerformSongCard.vue'; | ||
| import PerformSongsDropdown from '@/components/PerformSongsDropdown.vue'; | ||
| import PerformSongsRandomButton from '@/components/PerformSongsRandomButton.vue'; | ||
| import PerformSongEdit from '@/components/PerformSongEdit.vue'; | ||
| import PerformSongCard from '@/components/PerformSongCard.vue' | ||
| import PerformSongsDropdown from '@/components/PerformSongsDropdown.vue' | ||
| import PerformSongsRandomButton from '@/components/PerformSongsRandomButton.vue' | ||
| import PerformSongEdit from '@/components/PerformSongEdit.vue' | ||
| import { computed, nextTick, ref, watch, watchEffect } from 'vue' | ||
| import Axios from 'axios'; | ||
| Axios.defaults.baseURL = '/api'; | ||
| import { readPerformSong, PerformSongRead, getSpotifyImageUrl, readPerformSongsList } from '@/api'; | ||
| import { onMounted } from 'vue'; | ||
| import { useAppStore } from '@/store/app'; | ||
| import Axios from 'axios' | ||
| Axios.defaults.baseURL = '/api' | ||
| import { | ||
| readPerformSong, | ||
| PerformSongRead, | ||
| getSpotifyImageUrl, | ||
| readPerformSongsList, | ||
| } from '@/api' | ||
| import { onMounted } from 'vue' | ||
| import { useAppStore } from '@/store/app' | ||
| const app = useAppStore() | ||
| const props = defineProps<{ | ||
| id: number | string | undefined; | ||
| }>(); | ||
| const performSong = ref<PerformSongRead>(); | ||
| const imageUrl = ref(''); | ||
| const performSongsList = ref<PerformSongRead[]>(); | ||
| id: number | string | undefined | ||
| }>() | ||
| const performSong = ref<PerformSongRead>() | ||
| const imageUrl = ref('') | ||
| const performSongsList = ref<PerformSongRead[]>() | ||
| onMounted(async () => { | ||
| await app.loadPerformSongs() | ||
| performSongsList.value = app.performSongs | ||
| await app.loadPerformSongs() | ||
| performSongsList.value = app.performSongs | ||
| }) | ||
| watchEffect(async () => { | ||
| imageUrl.value = ''; | ||
| // performSong.value = await readPerformSong(Number(props.id)).then((res) => res.data); | ||
| performSong.value = app.getPerformSongById(Number(props.id)) | ||
| imageUrl.value = '' | ||
| // performSong.value = await readPerformSong(Number(props.id)).then((res) => res.data); | ||
| performSong.value = app.getPerformSongById(Number(props.id)) | ||
| }) | ||
| watchEffect(async () => { | ||
| if (performSong.value && performSong.value.spotify_id) { | ||
| imageUrl.value = await getSpotifyImageUrl(performSong.value.spotify_id).then((res) => res.data); | ||
| } | ||
| if (performSong.value && performSong.value.spotify_id) { | ||
| imageUrl.value = await getSpotifyImageUrl( | ||
| performSong.value.spotify_id | ||
| ).then((res) => res.data) | ||
| } | ||
| }) | ||
| </script> | ||
|
|
Oops, something went wrong.