ЛР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';
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import Film from "../models/Film";
|
import Film from "../models/Film";
|
||||||
import Group from "../models/Genre";
|
import Genre from "../models/Genre";
|
||||||
export default {
|
export default {
|
||||||
created() {
|
created() {
|
||||||
this.getFilms();
|
this.getFilms();
|
||||||
@ -131,7 +131,7 @@
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="container mt-4">
|
<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>
|
<button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
|
||||||
<table class="table text-light">
|
<table class="table text-light">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@ -83,7 +83,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container mt-4">
|
<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>
|
<button class="btn btn-success mr-2" @click="openModal('create')">Добавить</button>
|
||||||
<table class="table text-light">
|
<table class="table text-light">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@ -4,12 +4,14 @@ import App from './App.vue'
|
|||||||
import Index from './components/Index.vue'
|
import Index from './components/Index.vue'
|
||||||
import CatalogGenres from './components/CatalogGenres.vue'
|
import CatalogGenres from './components/CatalogGenres.vue'
|
||||||
import CatalogFilms from './components/CatalogFilms.vue'
|
import CatalogFilms from './components/CatalogFilms.vue'
|
||||||
|
import CatalogCollections from './components/CatalogCollections.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', redirect: '/index' },
|
{ path: '/', redirect: '/index' },
|
||||||
{ path: '/index', component: Index},
|
{ path: '/index', component: Index},
|
||||||
{ path: '/catalogs/genres', component: CatalogGenres},
|
{ path: '/catalogs/genres', component: CatalogGenres},
|
||||||
{ path: '/catalogs/films', component: CatalogFilms}
|
{ path: '/catalogs/films', component: CatalogFilms},
|
||||||
|
{ path: '/catalogs/collections', component: CatalogCollections}
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
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(){
|
public List<Long> getFilmIds(){
|
||||||
return filmIds;
|
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