github/StreamingCommunity
1
1
Fork 0
mirror of https://github.com/Arrowar/StreamingCommunity.git synced 2025-06-07 20:15:24 +00:00
Code Issues 2 Packages Projects Releases Wiki Activity

add loader to search button and add enter listener while searching

Browse Source
This commit is contained in:
Francesco Grazioso 2024-05-09 17:36:54 +02:00
parent 332b32013d
commit 31f99dbc30
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -64,3 +64,5 @@ venv.bak/
# Other # Other
Video Video
.idea/ .idea/
# kill_django.sh is a script to kill the Django server only for developement purposes
kill_django.sh

32
frontend/src/views/HomeView.vue
View File

@ -9,6 +9,7 @@ import { onBeforeRouteLeave } from 'vue-router'
const selectedOption = ref('film') const selectedOption = ref('film')
const searchedTitle = ref('') const searchedTitle = ref('')
const searchResults = ref<MediaItem[]>([]) const searchResults = ref<MediaItem[]>([])
const loading = ref(false)
const storeSearchResults = () => { const storeSearchResults = () => {
localStorage.setItem('searchResults', JSON.stringify(searchResults.value)) localStorage.setItem('searchResults', JSON.stringify(searchResults.value))
@ -30,8 +31,10 @@ watch(searchResults, storeSearchResults, { deep: true })
retrieveSearchResults() retrieveSearchResults()
function searchTitle() { function searchTitle() {
loading.value = true
search(searchedTitle.value, selectedOption.value).then((res) => { search(searchedTitle.value, selectedOption.value).then((res) => {
searchResults.value = res.data.media searchResults.value = res.data.media
loading.value = false
}).catch((err) => { }).catch((err) => {
console.log(err) console.log(err)
}) })
@ -44,14 +47,17 @@ function searchTitle() {
<div class="search-bar"> <div class="search-bar">
<input <input
v-model="searchedTitle" v-model="searchedTitle"
@submit="searchTitle" v-on:keyup.enter="() => searchTitle()"
class="search-input" class="search-input"
type="text" type="text"
placeholder="Cerca un titolo..." placeholder="Cerca un titolo..."
/> />
<div class="toggle-button-container"> <div class="toggle-button-container">
<Toggle style="margin-right: 30px" v-model="selectedOption" class="search-toggle"></Toggle> <Toggle style="margin-right: 30px" v-model="selectedOption" class="search-toggle"></Toggle>
<button @click="searchTitle">Cerca</button> <button @click="searchTitle">
<span v-if="!loading">Cerca</span>
<span v-else class="loader"></span>
</button>
</div> </div>
</div> </div>
</div> </div>
@ -119,6 +125,28 @@ function searchTitle() {
width: 250px; width: 250px;
} }
.loader {
width: 12px;
height: 12px;
border: 1px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
margin-left: 15px;
margin-right: 16px;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.card-container { .card-container {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);