dbs333
/
RealWorld


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>


<jsp:include page="/WEB-INF/jsp/include/head.jsp"></jsp:include>
<script>
    function favorite() {
        const favArticleBtn = document.querySelectorAll('.favorite-btn');
        if("${ssIsLogin}" === "true"){
            favArticleBtn.forEach(value =>
                value.classList.toggle('active')
            )
        } else {
            location.href = "/user/signin"
        }
    }
        

    function follow() {
        const followBtn = document.querySelectorAll('.follow-btn');
        if("${ssIsLogin}" === "true"){
            followBtn.forEach(value =>
                value.classList.toggle('active')
            )
        } else {
            location.href = "/user/signin"
        }
    }


    window.onload = () => {
        const tags = document.querySelector('.tag-list');
        const tagString = "${articleDetail.tags}"
        const tagList = tagString.split(',');
        if(tagString !== ''){
            tags.innerHTML = tagList.map(tag => 
                `<li class="tag">\${tag}</li>`
            ).join('');
        }

        
        const date = "${articleDetail.created}"
        document.querySelectorAll('.date').forEach(value => 
            value.textContent = new Date(date).toLocaleString()
        )
    }

    fet
</script>
</head>
<body>
    <jsp:include page="/WEB-INF/jsp/include/header.jsp"></jsp:include>

    <div class="article-page">
        <!-- Article Banner -->
        <section class="banner">
            <div class="container">
                <h1 class="article-banner-title">
                    <c:out value="${articleDetail.title}"></c:out>
                </h1>
                <div class="article-meta">
                    <div class="metadata">
                        <a href="userpage-my.html" class="profile-link">
                            <img src="img/avatar.jpg" alt="">
                        </a>
                        <div class="article-info">
                            <a href="userpage-my.html" class="name">
                                <c:out value="${articleDetail.writerName}"></c:out>
                            </a>
                            <span class="date">
                            </span>
                        </div>
                        <c:choose>
                            <c:when test="${articleDetail.writerId eq ssId}">
                                <div class="buttons">
                                    <a href="editor.html" class="edit-article btn-sm">
                                        <i class="fas fa-pencil-alt"> Edit Article</i>
                                    </a>
                                    <button class="delete-article btn-sm">
                                        <i class="fas fa-trash-alt"> Delete Article</i>
                                    </button>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="buttons">
                                    <button class="follow-btn btn-sm" onclick="follow()">
                                        <i class="fas fa-plus"></i>&nbsp;Follow Gerome
                                    </button>
                                    <button class="favorite-btn btn-sm" onclick="favorite()">
                                        <i class="fas fa-heart"></i>&nbsp;Favorite Article (564)
                                    </button>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
        </section>
    
        <div class="container main">
            <div class="article-content">
                <div class="col-12">
                    <pre>
                        <c:out value="${articleDetail.content}"></c:out>
                    </pre>
                    <ul class="tag-list">
                    </ul>
                </div>
            </div>
            <hr>
            <div class="article-actions">
                <div class="article-meta">
                    <div class="metadata">
                        <a href="userpage-my.html" class="profile-link">
                            <img src="img/avatar.jpg" alt="">
                        </a>
                        <div class="article-info">
                            <a href="userpage-my.html" class="name">
                                <c:out value="${articleDetail.writerName}"></c:out>
                            </a>
                            <span class=date>
                                <c:out value="${articleDetail.created}"></c:out>
                            </span>
                        </div>
                        <c:choose>
                            <c:when test="${articleDetail.writerId eq ssId}">
                                <div class="buttons">
                                    <a href="editor.html" class="edit-article btn-sm">
                                        <i class="fas fa-pencil-alt"> Edit Article</i>
                                    </a>
                                    <button class="delete-article btn-sm">
                                        <i class="fas fa-trash-alt"> Delete Article</i>
                                    </button>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <div class="buttons">
                                    <button class="follow-btn btn-sm" onclick="follow()">
                                        <i class="fas fa-plus"></i>&nbsp;Follow Gerome
                                    </button>
                                    <button class="favorite-btn btn-sm" onclick="favorite()">
                                        <i class="fas fa-heart"></i>&nbsp;Favorite Article (564)
                                    </button>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>
            <!-- comment -->
            <div class="row">
                <div class="col-8">
                    <div class="card comment-form">
                        <div class="card-block">
                            -- articleDetail: <c:out value="${articleDetail}"></c:out> <br>
                            -- title: <c:out value="${articleDetail.title}"></c:out> <br>
                            -- subtitle: <c:out value="${articleDetail.subtitle}"></c:out>  <br>
                            -- content: <c:out value="${articleDetail.content}"></c:out> <br>
                            -- tags: <c:out value="${articleDetail.tags}"></c:out> <br>
                            -- created: <c:out value="${articleDetail.created}"></c:out> <br>
                            -- writerId: <c:out value="${articleDetail.writerId}"></c:out> <br>
                            -- writerName: <c:out value="${articleDetail.writerName}"></c:out> <br>
                            -- writerEmail: <c:out value="${articleDetail.writerEmail}"></c:out> <br>
                            <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
                        </div>
                        <div class="card-footer">
                            <img class="comment-img" src="img/avatar.jpg" alt="">
                            <button class="btn btn-card btn-sm">Post Comment</button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-block">
                            <p class="card-text">
                                While most "todo" demos provide an excellent cursory glance at a framework's capabilities,
                                they typically don't convey the knowledge & perspective required to actually build real
                                applications with it.
                            </p>
                        </div>
                        <div class="card-footer">
                            <div class="user-info">
                                <a href="userpage-others.html" class="comment-author">
                                    <img class="comment-img" src="img/avatar.jpg" alt="">
                                </a>
                                <a href="userpage-others.html" class="comment-author">Gerome</a>
                                <span class="date-posted">November 24, 2021</span>
                            </div>
                            <i style="display: none" class="fas fa-trash-alt"></i>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-block">
                            <p class="card-text">
                                RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and
                                any backend (Node, Django, & more) and see how they power a real-world, beautifully designed
                                full-stack app called Conduit.
                            </p>
                        </div>
                        <div class="card-footer">
                            <div class="user-info">
                                <a href="userpage-my.html" class="comment-author">
                                    <img class="comment-img " src="img/avatar.jpg" alt="">
                                </a>
                                <a href="userpage-my.html" class="comment-author">username</a>
                                <span class="date-posted">posting date</span>
                            </div>
                            <i class="fas fa-trash-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>