![[필름톡] 화면에 뿌리는 것 먼저 해보기 (ajax)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-11-12T08%3A50%3A28.919Z-7f0fc505-16c5-4419-b2b8-8812ae8efa68&w=3840&q=75)
임의로 정보들을 만들어 화면에 나올 수 있게 테스트 하기
영화관
let cinemaList = [`가산디지털단지`, `사상롯데시네마`, `화명CGV`, `서면롯데시네마`, `덕천메가박스`];
for (let i = 0; i < cinemaList.length; i++) {
console.log(cinemaList[i] + `<br>`);
}
영화
let movieList = [{ age: 15, title: `베리드` }, { age: 15, title: `러브로지` }, { age: 19, title: `쏘우` }, { age: 19, title: `악마를 보았다` }];
for (let i = 0; i < movieList.length; i++) {
console.log(movieList[i].age + `<br>`);
console.log(movieList[i].title + `<br>`);
}
//날짜
var today = new Date();
var date = today.getDate();//일
//현재 날짜 +1
for (let i = 0; i < 10; i++) {
console.log(date + i);
}
상영시간 + 좌석
let seatList = [{ time: `14:35`, remain: `85/90` }, { time: `18:35`, remain: `20/98` }]
for (let i = 0; i < seatList.length; i++) {
console.log(seatList[i].time + `<br>`);
console.log(seatList[i].remain + `<br>`);
}아직 day로 하면 일요일 시작으로 0123456 으로 숫자로 나오는 것은 아는데 이 것을 요일로 바꾸는 법이 아직 미숙함
먼저 화면 뿌리고 시작할 예정
<!-- 메인 콘텐츠 -->
<div class="main__content">
<!-- 영화관 선택 -->
<div class="section">
<div class="section__title">영화관</div>
<div class="content cinema__selection">
<div onclick="cinemaLists()" class="cinema__area">
<div class="cinema__item">부산</div>
<div class="cinema__item">서울</div>
</div>
<div class="cinema__name" id="cinemas">
</div>
</div>
</div>
<!-- 영화 선택 -->
<div class="section">
<div class="section__title">영화 선택</div>
<div class="content" id="movies">
</div>
</div>let isMovieListsExecuted = false;
// 여기서는 영화 리스트를 가지고 와야한다
let movieList = [{ age: 15, title: `베리드` }, { age: 15, title: `러브로지` }, { age: 19, title: `쏘우` }, { age: 19, title: `악마를 보았다` }];
for (let i = 0; i < movieList.length; i++) {
console.log(movieList[i].age + `<br>`);
console.log(movieList[i].title + `<br>`);
}
function movieLists() {
if (isMovieListsExecuted) return;
for (let i = 0; i < movieList.length; i++) {
$("#movies").append(makeMovies(i))
}
isMovieListsExecuted = true;
}
function makeMovies(id) {
return ` <div class="movie__item">
<img src="num_${movieList[id].age}.png" alt="rating">
<span>${movieList[id].title}</span>
</div>`
}
function cinemaLists() {
if (isCinemaListsExecuted) return;
for (let i = 0; i < cinemaList.length; i++) {
$("#cinemas").append(makeCinemas(i))
console.log(cinemaList[i] + `<br>`);
}
isCinemaListsExecuted = true;
}
function makeCinemas(id) {
return ` <div onclick="movieLists()" class="cinema__detail__item">${cinemaList[id]}</div>`
}이런식으로 먼저 화면 클릭 시 이동되는 것을 먼저 연습함
근데 이거 왜 된거지? 아직 모름
- 잘 몰랐던게 ShowtimeResponse.MoveiDTO를 받을 때 생성자 Moive movie를 넣었는데 List<Movie>로 받아야해서 고민 계속함
- 참고함 여기에서
이거 그냥
public List<ShowtimeResponse.ShowTimeDTO> 날짜보기(Long date,Long id){
List<Showtime> dats = showtimeRepository.mFindByDateIdMovieId(date,id);
List<ShowtimeResponse.ShowTimeDTO> dtos = new ArrayList<>();
for(Showtime showtime : dats){
ShowtimeResponse.ShowTimeDTO dto = new ShowtimeResponse.ShowTimeDTO(showtime);
dtos.add(dto);
}
return dtos;
}이렇게 했으면 됐는데 이 때는 기억을 못했었음
그래서 이런식으로 했음
public List<ShowtimeResponse.MovieDTO> 영화관영화보기(Long id){
List<Screen> screens = screenRepository.mFindScreenByCinemaId(id);
List<Long> screenIds = screens.stream().map(screen -> screen.getId()).toList();
List<Showtime> showtimes = showtimeRepository.mFindByWithMovieScreenIds(screenIds);
List<Movie> moviePs = showtimes.stream().map(showtime -> showtime.getMovie()).distinct().toList();
List<ShowtimeResponse.MovieDTO> movieList = new ArrayList<>();
for(Movie movie : moviePs){
ShowtimeResponse.MovieDTO dto = ShowtimeResponse.MovieDTO.builder()
.id(movie.getId())
.movieNm(movie.getMovieNm())
.ratingGrade(movie.getRatingGrade())
.build();
movieList.add(dto);
}
return movieList;
}일단 리포지토리
@Query("select distinct st from Showtime st left join fetch st.movie mt where st.screen.id IN :ids ")
List<Showtime> mFindByWithMovieScreenIds(@Param("ids") List<Long> ids);서비스
public List<ShowtimeResponse.MovieDTO> 영화관영화보기(Long id){
List<Screen> screens = screenRepository.mFindScreenByCinemaId(id);
List<Long> screenIds = screens.stream().map(screen -> screen.getId()).toList();
List<Showtime> showtimes = showtimeRepository.mFindByWithMovieScreenIds(screenIds);
List<Movie> moviePs = showtimes.stream().map(showtime -> showtime.getMovie()).distinct().toList();
List<ShowtimeResponse.MovieDTO> movieList = new ArrayList<>();
for(Movie movie : moviePs){
ShowtimeResponse.MovieDTO dto = ShowtimeResponse.MovieDTO.builder()
.id(movie.getId())
.movieNm(movie.getMovieNm())
.ratingGrade(movie.getRatingGrade())
.build();
movieList.add(dto);
}
return movieList;
// List<Showtime> showtimes = showtimeRepository.mFindByScreenIds(screenIds);
// List<Movie> moviePs = showtimes.stream().map(showtime -> showtime.getMovie()).distinct().toList();
}컨트롤러
@GetMapping("/reservation/cinema/{id}")
public ResponseEntity<?> movies(@PathVariable("id") Long id){
List<ShowtimeResponse.MovieDTO> movieList = showtimeService.영화관영화보기(id);
return ResponseEntity.ok(Resp.ok(movieList));
}또 다른 궁금증
왜 alt=”rating” 이라 하면 사진이 안 보이고 rating 글자만 보일까?
async function movies(cinemaId){
let response = await fetch("http://localhost:8080/reservation/cinema/"+cinemaId,{
method: "get"
});
let data = await response.json();
console.log("data ", data);
console.log("body ", data.body);
$("#movie-box").empty();
for(movie of data.body){
let dom = makeMovie(movie);
$("#movie-box").append(dom);
}
}
function makeMovie(movie){
return ` <div class="movie__item">
<img src="num_${movie.ratingGrade}.png" alt="rating">
<span>${movie.movieNm}</span>`;
} 하고 json은
이런식으로
- 지역 선택 시 영화관
- 영화관 선택 시 영화 리스트
- 영화 리스트 선택 시 오늘 날짜로 +5
- 날짜 선택 시 상영시간
Share article