22. 10. 19(모달창, 오류페이지)

프로젝트 3일차!

프로젝트 기간이 짧은 만큼 기한을 지키는게 중요하다고 판단이되어 오늘 오전까지 맡은 기능을 다 구현하기로 했었다.

내가 맡은 기능은 어제 전부 구현을 했다!

다른 팀원이 내가 구현한 업로드 기능과 연결할 결과페이지를 만들어주셔서 연결시키니 그럴듯한 모양새가 나왔다!

 

그래서 오늘은 다른 추가적으로 내가 할 수 있는 기능들을 찾아서 해봤다.

 

1. home 프론트 수정

home 화면이 프론트가 좀 부족해보여 다른 부트스트랩 템플릿을 가져와 깔끔하게 바꿨고

 

2. home 위젯 추가

home 화면에서 신청내역으로 바로 이동할 수 있는 side widget을 추가하고

 

3.신청금액 모달창 추가

다른 분이 관리자페이지에서 신청내역을 승인하면 홈화면에 신청 사진이 나오게 구현해주셨는데 아래 버튼을 만들어서 버튼을 누르면 모달창으로 신청금액을 바로 확인할 수 있도록 구현해봤다. 

 

4. 삭제기능 추가

home 화면에서 내가 신청한 내역을 삭제할 수 있도록 삭제기능을 만들었는데 팀원들이랑 의견을 나눈 결과 홈화면에서는 관리자가 승인한 내역만 보이게 하고, 승인된 내역은 삭제를 못하게 하기로해서 승인내역페이지에서 승인되기 전 내역만 삭제할 수 있도록 바꾸었다!

 

5. 오류페이지 기능 추가

1) 신청페이지에서 input_num과 people_num이 일치하지 않을 때 나오는 오류페이지를 만들자

2) 욜로가 인식한 사람을 네모로 표시한 이미지를 반환하는 rectangle_image함수 만들자

3) 업로드 버튼을 누르면 rectangle_image함수를 호출하여 write_image로 저장하자

4) write 이미지를 오류페이지에 보여주자

5) 욜로의 잘못인경우 오류를 신고할 수 있도록 오류신고 버튼을 만들어주자

 

---

3. 신청금액 모달창 추가

지난 프로젝트 때 다른분이 구현을 했던 기능인데 이번엔 내가 구현을 해볼 수 있어서 좋았다.

html에서만 코드를 작성해주면 됐다.

script 한 줄 추가해주고 버튼에 modal을 주면 됐다!

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>




<!-- Button trigger modal -->
<div class="btn-box">
    <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal{{my_image.id}}">
        <span class="material-symbols-outlined">지원금액 확인하기</span>
    </button>
</div>
<!-- 지원금 확인하기 Modal -->
<div class="modal fade" id="exampleModal{{my_image.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">지원금액 확인하기</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ my_image.team_name.team_name }}팀의 지원금액은 {{ my_image.people_num|mul:5 }} (만원) 입니다
            </div>
            <div class="modal-footer">
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        <span class="material-symbols-outlined">close</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

 

 

5. 오류페이지 기능 추가

1) 신청페이지에서 input_num과 people_num이 일치하지 않을 때 나오는 오류페이지를 만들자

{% extends 'base.html' %}
{% block title %}error{% endblock %}
{% block content %}
<!-- Product section-->
<section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
        <form method="post" action="/upload/" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row gx-4 gx-lg-5 align-items-center">
                <div class="col-md-6">
                    <img class="card-img-top mb-5 mb-md-0" src="" alt="..." id="img" />
                </div>
                <div class="col-md-6">
                    <h1 class="display-5 fw-bolder">{{ user.team_name }} 회식비 신청 오류</h1>
                    <div class="fs-5 mb-5">
                        <span></span>
                    </div>
                    <div class="card" style="width: 30rem; border-color: aliceblue;">
                        <div class="card-body">
                            <h5 class="card-title">오류입니다!</h5>
                                <br>
                            <p class="card-text">아래가 오류의 원인이 될 수 있습니다
                                <br> 1. 인원 수 오기입
                                <br> 2. 머신러닝 오작동
                                <br>
                            <br> 오류의 원인을 확인하시어 
                            <br> 1번일 경우 다시 신청 해주시고, 2번일 경우 오류 신청을 해주세요!
                            <br> 머신러닝 오작동일 경우 관리자가 확인 후 승인해 드립니다
                        </p>
                        </div>
                    </div>
                    <table class="table" style="margin-top: 30px;">
                        <thead>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"> 입력한 인원 수</th>
                                <td>{{ my_image.input_num }}</td>
                            </tr>
                            <tr>
                                <th scope="row"> 카운트 된 수</th>
                                <td>{{ my_image.people_num }}</td>
                            </tr>
                        </tbody>
                    </table>
                    
                    
                </div>
            </div>
    </div>
    </form>
    </div>
</section>

{% endblock %}

 

2) 욜로가 인식한 사람을 네모로 표시한 이미지를 반환하는 rectangle_image함수 만들자

def rectangle_image(image,write_image):

    img = cv2.imread(settings.BASE_DIR/image[1:])

    results = model(img)
    result = results.pandas().xyxy[0].to_numpy()
    result = [item for item in result if item[6]=='person']

    tmp_img = cv2.imread(settings.BASE_DIR/image[1:])
    for j in range(len(result)):
        cv2.rectangle(tmp_img, (int(results.xyxy[0][j][0].item()), int(results.xyxy[0][j][1].item())), (int(results.xyxy[0][j][2].item()), int(results.xyxy[0][j][3].item())), (255,255,255))
    cv2.imwrite(settings.BASE_DIR/write_image[1:], tmp_img)
    return tmp_img

 

3) 업로드 버튼을 누르면 rectangle_image함수를 호출하여 write_image로 저장하자

# 머신러닝 코드 불러오기
my_image.people_num = transform_image(my_image.image.url)
rectangle_image(my_image.image.url,my_image.write_image.url)
my_image.save()
if int(input_num) == my_image.people_num:
    return redirect(f'/result/{my_image.id}/')
else:
    return redirect(f'/error/{my_image.id}/')

 

4) write 이미지를 오류페이지에 보여주자

<img class="card-img-top mb-5 mb-md-0" src="{{my_image.write_image.url}}" alt="..." id="img" />

 

5) 욜로의 잘못인경우 오류를 신고할 수 있도록 오류신고 버튼을 만들어주자

<div style="text-align:center; margin-top: 30px;">
    <button class="btn btn-outline-dark flex-shrink-0" type="submit">
        <a href="/upload" style="text-decoration: none; color: inherit;">다시 신청하기</a>
    </button>

    <button class="btn btn-outline-dark flex-shrink-0" type="submit">
        <a href="/my_objection/{{ my_image.id }}" style="text-decoration: none; color: inherit;">오류 신고하기</a>
    </button>
</div>