TODO(Nguyen).txt

TODAY: 
    GIAO TASK: 
        MAKE BETTER UI: 
            Nghia: 
                VNPAYReturn
                    file: VNPayReturn.js
                        test url: http://localhost:3000/vnpay_return?vnp_Amount=1000000&vnp_BankCode=NCB&vnp_BankTranNo=VNP14205838&vnp_CardType=ATM&vnp_OrderInfo=Thanh+toan+cho+ma+GD%3A28105129&vnp_PayDate=20231128105151&vnp_ResponseCode=00&vnp_TmnCode=0RU9EWEC&vnp_TransactionNo=14205838&vnp_TransactionStatus=00&vnp_TxnRef=28105129&vnp_SecureHash=bbb6e87c266830c718b06f142fb6d3dc3349b0505b415946eb15db58bf8df9335671a95328cc0fbc0646262e1c3408184e822a189aa43de5b85276fcd1111033
                VNPayNhapTien
                    file: CreateOrder.js
                        test url: http://localhost:3000/createorder
            Lap: 
                BookedInformation.js 
                BookingPlaceInfo.js

    -> TOMORROW: 100% WORK ON THE VISUALS 
        Search Place recommendation () [] 

        Sidebar of: 
            + hotel detail [] @Current 
            + search [] @Next 
                -> chinh lai cho can  

        Comment section: @Chieu 
            Make it look good, with random animal image  


    MAKE SURE THE FRONT-END AND BACK-END CAN COMMUNICATE: 
        Since now there are a lot of information are still fixed 
        -> List all the spot that have hard-coded information 
        
        PROBLEM: ***the amount of data between the relation are not match*** 
            HAVE MORE AND BETTER SYNCHRONIZED DATA FOR DEMONSTRATION 

        PREPARE THE DEMO SCRIPT, MAKE SURE EVERYTHING WORKS GOOD FOR DEMO @Tonight 
            @Oke: okay feature-wise

            DEMO ALL THE FEATURES: 
                1. Register @Oke 
                    -> register an account 
                2. Login @Oke 
                    -> login using that account 

                3. Searching for a place @Oke 
                    -> Show a list of places 

                4. Have all the places show on the map modal @Oke 

                5. Hotel detail: 
                    Click on a hotel result to view the hotel detail @Oke 
                    Click on certain tab to sliding up and down to look at some informations @NotOke

                6. Upload Hotel:     
                    -> Upload a hotel with some informations @Oke 
                        add userId to hotel model, migration, seed [X] 
                    Show the hotel that have been uploaded of user 
                        In view booking :)) 
                        -> Store the userid in localStorage after login [X] 

                        To get the room that the user san sang cho thue 
                            -> add userid into the request to the getbookinfo [X]
                            -> find in hotel that have USERID -> return it [X] 

                        To get the information of that room getting booked or not @Next 
                            -> find the HOTELID in the BOOKEDPLACES table -> return it 

                -> Search for the just uploaded hotel in the search 
                    -> To show that it actually get uploaded  @Oke 

                7. Book a hotel: @Oke 

                8. View Booking: 
                    -> After booking something 
                    -> Show the booking that it the hotel actually have been booked @KindaOke :)) 
                        **When book a hotel 
                            Search the bookingplaces with the userid 
                            and all the hotel information using the hotelid 
                            -> return all the informations

                        To show the what hotel that the user is booking -> 
                            find the userid in the booking places table [X] 

                Create user A that upload a hotel -> show the hotel exist in view booking haven't booked yet 
                Create user B that book that hotel -> show the hotel get booked in view booking 
                    These 2 features still not work 

                Done :))

                9. Huy phong still not working yet :v 
                    -> 

                

        Today, do all the tasks in 30 minutes session @NewFeature

        List of things need to be done tomorrow: 
            + Homepage: Place recommendation 

            Comment Feature @Tomorrow 
            -> Make sure everything is working correctly 

            Backend deployment also need to use TMUX :)) @Tomorrow
                since we gonna have a lot of process running (2 particularly 2 :)) 
                if we lucky we gonna get the original server to run first :)) 

        Connect phong information to the actual pay @Next 


        Wednesday we will work on all the images and deployment and STYLING of the things @Wednesday


        All features: 
            Homepage: (1h) 
                hardcoded: 
                    front-end: 
                        no place recommendation [] @Later    
                        *** the upload button should only be showned when logged in [] @Later 
                        check if the token have expired if it is -> automatically logout []

                        file: view/homepage.js

                visual: 
                    10/10

            Searching: (2h) 
                hardcoded: 
                    front-end: 
                        add chat bot 
                        not have:
                            ** Map on the bottom (2h) [X] 
                                ** Map Modal when click on it [X] 
                                ** Pin the long, lat of all the locations on the map [X] 
                                ** Map shows all the searches points on there [X] 
                                    ** loads all the searches points from database [X] 
                                        in the searchpage -> then pass it to the LocationOnMap, MapModal 

                                ** Set the viewport to center the first hotel [] @Later 


                        hotel preview image 

                        file: view/searchpage.js

                    back-end: 
                        store all long,lat of the hotel in the db [X] 
                            -> We already have a code snippet for generating all the locations of the place 
                            in the file MapModal.js
                            Do it in the seed [X] 

                        return the long, lat info to front end [X] 

                visual: 
                    hơi trống trải
                    7/10 

            Hotel Detail: (3h)
                hardcoded: 
                    front-end: 
                        not have: map block as well (2h) [X] 
                            css to make it looks nicer [] @Later 

                        rau ria: 
                            Bam "quy tac chung"  nhay xuong duoi [] 
                            Bam "danh gia khach hang"  nhay xuong duoi []
                            Bam tong quan: hien ra bang tong quan []
                        
                        comments [] @Later


                        file: view/hoteldetail.js

                back-end:
                    should have more images []

                visual: 
                    Ngon-10/10

            Tra phong: 
                haven't implemented 

            Upload Hotel: 
                hardcoded: 
                    back-end: 
                        file: route.js controller.js 

                    front-end: 
                        not have: 
                            place recommendation @RauRia
                            also send some information for storing the map location as well @RauRia

                        Show upload success/fail [X] 
                            What behaviour needed ?? 

                                if upload success -> goto homepage [] 
                                else -> alert upload fail []
                                
                                Toastify ??  


                visual: 
                    ngon - 7/10

            Booking: I don't know the state of this thing (*** Investigate it tonight :)) (2h) 
                hardcoded: 
                    front-end: 
                        Result page: extract the giao dich information from the url [X] 
                        Dien tien page: add HTML code [X] 
                            make better ui: 
                                VNPAYReturn @Nghia 
                                VNPayNhapTien @Nghia 

                        file: view/hoteldetail.js

                    back-end: 
                        i don't know about it :)) 
                        
            Login: 
                visual: 
                    oke - 5/5

            Register 
                hardcoded: 
                    back-end: 
                        haven't check if the user pre-exist or not [] @Later 
                        file: authController.js

                visual: 
                    oke - 5/5

            Comment system: 
                Haven't implement anything though


            View Booking 
                hardcoded: 
                    MAKE SURE THE TO COMBINE OUR CODE TO CLAP CODE @ASAP 
                    user tab: 
                        front-end: 
                            need a button for view booking as well 
                                -> click on the username [X] 

                            huy phong didn't work 

                            Send the user id to the backend to get the real booking information [] @NoThanks

                            Have the left side bar to show some user information [] @Later 
                            lien he nguoi cho thue didn't work 

                            Get the booking place info to look better [] @CLap 
                                ** make it look like shopee 
                    
                    manager tab: 
                        front-end: 
                            huy phong didn't work 
                            lien he nguoi cho thue didn't work 
                            
                visual: 
                    Hơi ngon ngon: 7/10 



    LIST OUT ALL THE UI THAT NEED TO WORK (1h): 
        Upload hotel (Lap)
            -> Lap tu des 
            Des sao cho đẹp đẹp th chứ t cũng đ có ý tưởng :v 
            
        View booking (Nghia)
            -> Giống cái giỏ hàng của shopee, có nhiều tab vd: Chờ thanh toán, vận chuyển, chờ giao hàng 
            thì của mình có 2 tab
                + chổ nghỉ đang thuê
                + chổ nghỉ đang cho thuê  
            M vô giỏ hàng shopee coi thử bố cục nó như nào, làm giống giống 
            Sửa file: BookingInformation.js 

        View hotel detail (Nghia)
            -> Giong website, suong suong  
            https://www.booking.com/hotel/vn/bimexco-resort.vi.html?aid=304142&label=gen173nr-1FCAEoggI46AdIKlgEaPQBiAEBmAEquAEXyAEM2AEB6AEB-AECiAIBqAIDuAKboPWqBsACAdICJDIzN2Q2ZTUzLTQyN2MtNDk2YS1iMGY3LTg2ZTQ3YjIxMTgzY9gCBeACAQ&sid=81041cbcd763e0b359b2773dfa36fb4c&dest_id=-3733750;dest_type=city;dist=0;group_adults=2;group_children=0;hapos=1;hpos=1;no_rooms=1;req_adults=2;req_children=0;room1=A%2CA;sb_price_type=total;sr_order=popularity;srepoch=1700614186;srpvid=e05b05d3068000a8;type=total;ucfs=1&#hotelTmpl
            Phần nào thiếu thì cứ div làm thành hình chữ nhật có màu cho nó đủ bố cục r t thêm vô sau nha 
            Bỏ mấy cái nhỏ nhỏ râu ria đi nha, cái nào to to dễ thấy thì làm th :v
            Sửa file: HotelDetail.js 
            
        -> Prepare des mau (1h)  

    -> NOTE: Sống chết cũng phải làm cho xong :v 

    List of features Progress: 
        Search 
            -> Frontend: @Halfway (2h) 
            -> Backend: @Halfway (2h) 
            View hotel detail: 
                -> Frontend: @Halfway (2h) 
                    Make the images displaying work (1h) [] 
                    Make the detail id works (1h) [] @Next
                        since now it still fixed the ids 

                    Apply map thingy 
                    **Mode of map show: 
                        Search page map 
                            little map: 
                                ** It's just a button (hien thi tren ban do) on top of  
                                a IMAGE of a map of that area 

                            big map: 
                                -> show all the search list markers on the map but bigger size :v 
                                It's a MODAL on top
                                with infos: 
                                    + the hotel list on the left 
                                        + HOVER on one of the hotel the marker on the map DO SOME ANIMATION
                                    + The map on the right 
                                
                        Detail page map 
                            little map: 
                                -> show a closer view with actual marker of the place HIGHLIGHTED 
                            big map: 
                                It's a MODAL on top
                                with infos: 
                                    + the hotel information on the left is a modal 
                                    on top of the map as a background 
                                    + each marker have their price on the right 

                        Operation/Methods needed: 
                            + Show a map with different size [X] -> change width, height
                            + Draw a maker at a a position [X] -> Change Pin
                            + Marker Animation [] @Later 
                            + Change Color [X]

                -> Backend: @Halfway (2h) @Next  


        Booking (thanh toan) @Alert 
            -> Payment 
                Frontend: @1/4  (2h) 
                Backend: @1/4   (2h) 
            -> Refund:  @Later 
                Frontend: @Nothing  (2h) 
                Backend: @Nothing  (2h) 
            
        View booking:  
            customer place booking
            manager booked places 
            -> Frontend: @1/3 (2h) 
                -> Send needed request data to the server [] (1h) 
            -> Backend: @2/3 (2h) 
                -> Connect to database and get that info [X] 

        Upload hotel: 
            Frontend: @1/2 
                -> Have all the information form 
            Backend: @2/3
                -> Receive all the information [X]
                -> Push them into a table [X]

        Login: 
            Backend: @4/5
                Actually checking the user information, instead of fixed values [X] 
                Hash the password 

        Register: 
            Frontend: @2/3 
            Backend: @2/3
                -> Receive all the information [X] 
                -> Push them into a table [X] 

    How the api search for places with available time range () ???  
    PASSWORD HASHING @Later
    Add Database operations to the authentication server code (1h) 
        -> Create User Model 
        -> With 3 opertions:
            + check if user exist 
            + add user 
            + 
        -> Create Refresh Token model: ?? @DatabaseRelated @Later 
            storing refresh token along with user id

    BIG CHANGE: 
        money transaction api:
            vnpay 
            -> HOSTING ON ACORN as well (for TESTING at least) 
        map api:
            goong 

    -> We have a 5 days left 
        -> Done all of these features in manner of days 
        -> We're gonna spend 1 day for deployment stuff ?? 

    Big API features: 
        Map Services: 
            Show places on uses Goong Map Api (4h) [] 
                -> Pin a single marker  on the map (1h) [] 
                -> Pin multiple markers  on the map (1h) [] 
                -> Return a position from an address (1h) [] 
                -> Have a good looking marker icon (10p) [] @Later 

        Image Hosting service - cloudinary (4h) [] 
            NOTES: 
                should we just convert the image to base64 on the client 
                then send to the server
                then the server will again send that to the image hosting services 

            Features: 
                -> Get the image using it's url (1h) [] 

                Backend: 
                    write an image storing api   

            NOTE: 
                the server is the one who actually send the image to the cloudinary storage 
                -> server: get the image from the client then send it to cloudinary 
                -> client: only get the image from the url 

            Our database will only store the url/id of the image 


    Create upload hotel front-end (2h) [X] 
        -> How image upload works ?? @Next 
        -> Connect this site to the original front-end routing system (1h) []

    Create upload hotel api (2h) [] 
        Dang cho nghi cua quy vi 
        -> get the actual information 
            -> along with the images

    Comment component (1h): @Later 
    Comment api (2h): @Later 

    Booking front-end (2h): 
        components: 
            .... 

    Booking api (2h): 

    View-Booking api (2h): 

    Hotel detail site (2h) @Halfway 
        components: [X]
            Ten khach san 
            Button: dat can ho 
            Dia chi 
            Danh gia: 
                diem 
                text: danh gia 
                so luong danh gia 
            Anh: 
                1 Anh lon ben phai 
                2 Anh nho ben trai  
                list anh khac ben duoi 
            Box tim phong ben trai: @Later 
            Hien thi tren ban do @Later

        -> Connect this site to the original front-end routing system (1h) []

    Add register client code (1h) @Halfway
        -> Have the register ui in place [X]
        -> Need: 
            role buttons: [X]
            + customer 
            + hotel manager  
        -> React to success/fail register result from server []






TODO: 
    Report final: 
        + Overview System 
        + Introduction 
        + Features (Base + Advance)
        + Results + Demo 


    Show the search result on to the page (2h) @Halfway 
        -> still need:
            price
            thumbnail 

    Handle login on the clientside (2h) @Halfway 
        -> half way there 
        -> need:
            + some login information
            + logout feature (calling api)


    Add authorization middleware (2h) 
        role based 
        -> maybe trying to find the old code that i wrote before 

    Payment API (4h) 

    Learn how Sequence Diagram works (1h) [] 
    Wrap the development environment in Docker (4h) [] @Maybe

    <insert a Sequence Diagram for clearer> (2h)
        -> How the API flow gonna works: 
            1. User call to route 
            2. route call controller 
            3. controller calls 'model'(the data part) and 'service'(the logic part) -> get the result back 
            4. controller return the result back to the view  

        Init project: 
            Understand Sequelize (2h) []
            Setup folder structure (2h) []
            Init Development Rules (1h) []
                -> Where to put things ? 

            Setup Development Environment Specs (2h) []
                -> Database Software
                    -> Connection port 
                -> Node version


DONE:  
    HANDLE FAILED REQUEST [X] 
        failed login 
        failed checking booking ??  
        if reached to authentication-required page 
            if not logged in -> redirect to homepage 

    Update the code to work with new database 
        + controller code (1h) 
        + seeder code (2h) [X]
            -> Some needed code is kinda done 

        Make all the api work good 
            -> Which are all the backend work :v 

    Make the search works again @Next 
    To do some operations (view booking info) the person have to be logged in ? 
        How could we do that ?? 
            -> Add the token into the request then validate the request ?? 

            ** Solution 
            -> Front end solution: Header Authencation Bearer 
                -> ** Add this header to the view booking request [X]
                token: 
                    localStorage.getItem("accessToken");
            -> Backend Solution: Authenticate MIDDLEWARE 
                -> ** Add the middleware before getting booking information [X]
    // TODO: Backend: upload the images to the cloudinary server [X]
    HTML View-Booking front-end: [X]
        nhieu tab giong tab shopee
        + customer:  
            list of bookings TAB 
                Ten khach san 
                Thong tin phong
                Gia phong 
                Thanh tien 
                Liên hệ người cho thuê
                Thong tin ngay den ngay di, member count 
                Hủy phòng

        + hotel manager: 
            list of bookings TAB 
                the same upper 
            booked places TAB 
                Thong tin phong
                Gia phong 
                Thanh tien 
                Liên hệ người thuê
                Thông tin người thuê
                Thong tin ngay den ngay di, member count 

    Call the hotel details api on the front end [X]

    Redesign the low level design from the reference image (1h) 
    API stub:     
        Search for hotels (1h) [X] 
        Return hotel details (1h) [X] 
    Understand Sequelize (2h) [X] 
    Scraping data (4h) [X] 
    Connect front-end and back-end with a simple message: (2h) [X] 
        “Hello Backend” from React front-end
        “Hello React” from Express back-end

    Wrap the development environment in Docker (4h) @Later
        -> learn how Docker works 
            -> Can use bind mount to mount the source code to local dev environment 

    Init the database to make it works (1h) [X] 
    Setup folder structure (2h) [X]
    -> Init Development Rules (1h) [X] 





NOTE THUC HANH: 
    so luong bai lab minimum: 3 bai 
    bao cao: 
        chon 1 trong 2:
        buoi 1: front end: 
            1. html css 
            2. javascript jquery

        buoi 2: back end: 
            1. crud
            2. session, cookie, web storage
        
        buoi 3: advance:
            1. tang hieu suat -> ajax, single page application 
            2. deploy -> stack