|
|
@@ -8,7 +8,48 @@
|
|
|
|
|
|
<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>
|
|
|
@@ -18,24 +59,43 @@
|
|
|
<!-- Article Banner -->
|
|
|
<section class="banner">
|
|
|
<div class="container">
|
|
|
- <h1 class="article-banner-title">Article Title</h1>
|
|
|
+ <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">Username</a>
|
|
|
- <span class="date">November 24, 2021</span>
|
|
|
- </div>
|
|
|
- <div class="buttons">
|
|
|
- <a href="editor.html" class="edit-article btn-sm">
|
|
|
- <i class="fas fa-pencil-alt"> Edit Article</i>
|
|
|
+ <a href="userpage-my.html" class="name">
|
|
|
+ <c:out value="${articleDetail.writerName}"></c:out>
|
|
|
</a>
|
|
|
- <button class="delete-article btn-sm">
|
|
|
- <i class="fas fa-trash-alt"> Delete Article</i>
|
|
|
- </button>
|
|
|
+ <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> Follow Gerome
|
|
|
+ </button>
|
|
|
+ <button class="favorite-btn btn-sm" onclick="favorite()">
|
|
|
+ <i class="fas fa-heart"></i> Favorite Article (564)
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </c:otherwise>
|
|
|
+ </c:choose>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -44,10 +104,10 @@
|
|
|
<div class="container main">
|
|
|
<div class="article-content">
|
|
|
<div class="col-12">
|
|
|
- <p>Article content</p>
|
|
|
+ <pre>
|
|
|
+ <c:out value="${articleDetail.content}"></c:out>
|
|
|
+ </pre>
|
|
|
<ul class="tag-list">
|
|
|
- <li class="tag">welcome</li>
|
|
|
- <li class="tag">welcome</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -59,17 +119,35 @@
|
|
|
<img src="img/avatar.jpg" alt="">
|
|
|
</a>
|
|
|
<div class="article-info">
|
|
|
- <a href="userpage-my.html" class="name">Username</a>
|
|
|
- <span class=date>November 24, 2021</span>
|
|
|
- </div>
|
|
|
- <div class="buttons">
|
|
|
- <a class="edit-article btn-sm" href="editor.html">
|
|
|
- <i class="fas fa-pencil-alt"> Edit Article</i>
|
|
|
+ <a href="userpage-my.html" class="name">
|
|
|
+ <c:out value="${articleDetail.writerName}"></c:out>
|
|
|
</a>
|
|
|
- <button class="delete-article btn-sm">
|
|
|
- <i class="fas fa-trash-alt"> Delete Article</i>
|
|
|
- </button>
|
|
|
+ <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> Follow Gerome
|
|
|
+ </button>
|
|
|
+ <button class="favorite-btn btn-sm" onclick="favorite()">
|
|
|
+ <i class="fas fa-heart"></i> Favorite Article (564)
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </c:otherwise>
|
|
|
+ </c:choose>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
