ЛР4 коллекции тоже работают, остался отчет
This commit is contained in:
ityurner02@mail.ru
parent
446e83c38e
commit
1126696bb9
246
Frontend/vue-project/src/components/CatalogCollections.vue
Normal file
246
Frontend/vue-project/src/components/CatalogCollections.vue
Normal file
@ -0,0 +1,246 @@
|
||||
<script>
|
||||
import 'axios';
|
||||
import axios from "axios";
|
||||
import Collection from "../models/Collection";
|
||||
import Film from "../models/Film";
|
||||
export default {
|
||||
created() {
|
||||
this.getCollections();
|
||||
this.getFilms();
|
||||
},
|
||||
mounted() {
|
||||
const addModal = document.getElementById('editModal');
|
||||
addModal.addEventListener('shown.bs.modal', function () {
|
||||
})
|
||||
const openModalForAdd = document.getElementById('openModalForAdd');
|
||||
openModalForAdd.addEventListener('shown.bs.modal', function () {
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return{
|
||||
collections: [],
|
||||
URL: "http://localhost:8080/",
|
||||
collection: new Collection(),
|
||||
films: [],
|
||||
selectedFilms: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCollections(){
|
||||
axios.get(this.URL + "collection")
|
||||
.then(response => {
|
||||
this.collections = response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
addCollection(collection){
|
||||
console.log(collection);
|
||||
axios.post(this.URL + "collection", collection)
|
||||
.then(() => {
|
||||
this.getCollections();
|
||||
this.closeModal();
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
deleteCollection(id){
|
||||
axios.delete(this.URL + `collection/${id}`)
|
||||
.then(() =>{
|
||||
this.getCollections();
|
||||
})
|
||||
},
|
||||
editCollection(collection){
|
||||
axios.put(this.URL + `collection/${collection.id}`, collection)
|
||||
.then(() =>{
|
||||
const index = this.collections.findIndex((s) => s.id === collection.id);
|
||||
if (index !== -1) {
|
||||
this.collections[index] = { ...collection };
|
||||
}
|
||||
this.closeModal();
|
||||
this.getCollections();
|
||||
})
|
||||
this.closeModal();
|
||||
},
|
||||
openModalForAdd(status, collection = null) {
|
||||
if (status === "create") {
|
||||
this.collection = new Collection();
|
||||
this.collection.status = "create";
|
||||
} else if (status === "edit" && collection) {
|
||||
this.collection = { ...collection };
|
||||
this.collection.status = "edit";
|
||||
}
|
||||
this.selectedFilms = this.collection.filmIds;
|
||||
document.getElementById("openModalForAdd").style.display = "block";
|
||||
},
|
||||
closeModalForAdd() {
|
||||
document.getElementById("openModalForAdd").style.display = "none";
|
||||
this.selectedFilms = [];
|
||||
this.collection = new Collection();
|
||||
},
|
||||
openModal(status, collection = null) {
|
||||
if (status === "create") {
|
||||
this.collection = new Collection();
|
||||
this.collection.status = "create";
|
||||
} else if (status === "edit" && collection) {
|
||||
this.collection = { ...collection };
|
||||
this.collection.status = "edit";
|
||||
}
|
||||
document.getElementById("editModal").style.display = "block";
|
||||
},
|
||||
closeModal() {
|
||||
document.getElementById("editModal").style.display = "none";
|
||||
},
|
||||
getFilms(){
|
||||
axios.get(this.URL + "film")
|
||||
.then(response => {
|
||||
this.films = response.data;
|
||||
console.log(response.data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
addCollectionFilm(id) {
|
||||
let filmId = document.getElementById('films').value;
|
||||
axios
|
||||
.post(this.URL + `collection/add_film/${id}?film_id=${filmId}`)
|
||||
.then(() => {
|
||||
this.closeModalForAdd();
|
||||
this.getCollections();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
delCollectionFilm(id) {
|
||||
let filmId = document.getElementById('films').value;
|
||||
axios
|
||||
.delete(this.URL + `collection/del_film/${id}?film_id=${filmId}`)
|
||||
.then(() => {
|
||||
this.closeModalForAdd();
|
||||
this.getCollections();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
itemsGenres(filmIds) {
|
||||
let result = [];
|
||||
if (typeof filmIds === 'undefined') {
|
||||
return;
|
||||
}
|
||||
this.films.forEach(film => {
|
||||
for (let i = 0; i < filmIds.length; i++) {
|
||||
if (film.id === filmIds[i]) {
|
||||
result.push(film);
|
||||
}
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="container mt-4">
|
||||
<h1 class="text-center text-danger mb-4">Коллекции</h1>
|
||||
<button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
|
||||
<table class="table text-light">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Название</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="col in collections" :key="col.id">
|
||||
<td>{{ col.name }}</td>
|
||||
<td>
|
||||
<td>
|
||||
<button class="btn btn-warning mr-2" @click="openModal('edit', col)">Изменить</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-danger" @click="deleteCollection(col.id)">Удалить</button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-success mr-2" @click="openModalForAdd('edit', col);">Добавить фильмы</button>
|
||||
</td>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!--Форма для создания коллекций-->
|
||||
<div class="modal" tabindex="-1" id="editModal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Коллекция</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Название:</label>
|
||||
<input type="text" class="form-control" id="name" name="name" v-model="collection.name">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="editModal" @click="closeModal()">Закрыть</button>
|
||||
<button type="button" class="btn btn-primary" v-if="collection.status === 'create'" @click="addCollection(collection)">Создать</button>
|
||||
<button type="button" class="btn btn-primary" v-else @click="editCollection(collection)">Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--Форма для привязки коллекции и фильма -->
|
||||
<div class="modal" tabindex="-1" id="openModalForAdd">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Добавление фильмов</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Название:</label>
|
||||
<input readonly type="text" class="form-control" id="name" name="name" v-model="collection.name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name">Фильмы:</label>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item" v-for="film in itemsGenres(this.collection.filmIds)" :key="film.id">
|
||||
<div>
|
||||
<label>{{ film.name }}</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-4">
|
||||
<label>Выберите фильм</label>
|
||||
<select class="form-select" id="films" required>
|
||||
<option v-for="film in this.films"
|
||||
:value="film.id">
|
||||
{{ film.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-4">
|
||||
<button class="btn btn-success" type="button" id="addFilmButton"
|
||||
@click="addCollectionFilm(this.collection.id)">Добавить</button>
|
||||
<button class="btn btn-danger" type="button" id="delFilmButton"
|
||||
@click="delCollectionFilm(this.collection.id)">Удалить</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="editModal" @click="closeModalForAdd()">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -2,7 +2,7 @@
|
||||
import 'axios';
|
||||
import axios from "axios";
|
||||
import Film from "../models/Film";
|
||||
import Group from "../models/Genre";
|
||||
import Genre from "../models/Genre";
|
||||
export default {
|
||||
created() {
|
||||
this.getFilms();
|
||||
@ -131,7 +131,7 @@
|
||||
</script>
|
||||
<template>
|
||||
<div class="container mt-4">
|
||||
<h1 class="text-center mb-4">Фильмы</h1>
|
||||
<h1 class="text-center text-danger mb-4">Фильмы</h1>
|
||||
<button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
|
||||
<table class="table text-light">
|
||||
<thead>
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
|
||||
<template>
|
||||
<div class="container mt-4">
|
||||
<h1 class="text-center mb-4">Жанры</h1>
|
||||
<h1 class="text-center text-danger mb-4">Жанры</h1>
|
||||
<button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
|
||||
<table class="table text-light">
|
||||
<thead>
|
||||
|
||||
@ -4,12 +4,14 @@ import App from './App.vue'
|
||||
import Index from './components/Index.vue'
|
||||
import CatalogGenres from './components/CatalogGenres.vue'
|
||||
import CatalogFilms from './components/CatalogFilms.vue'
|
||||
import CatalogCollections from './components/CatalogCollections.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect: '/index' },
|
||||
{ path: '/index', component: Index},
|
||||
{ path: '/catalogs/genres', component: CatalogGenres},
|
||||
{ path: '/catalogs/films', component: CatalogFilms}
|
||||
{ path: '/catalogs/films', component: CatalogFilms},
|
||||
{ path: '/catalogs/collections', component: CatalogCollections}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
||||
BIN
data.mv.db
BIN
data.mv.db
Binary file not shown.
@ -27,4 +27,6 @@ public class CollectionDTO {
|
||||
public List<Long> getFilmIds(){
|
||||
return filmIds;
|
||||
}
|
||||
public void setId(long id){ this.id = id; }
|
||||
public void setName(String name){ this.name = name; }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user