-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ejs
141 lines (136 loc) · 7.07 KB
/
index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<%- include('../partials/head') %>
</head>
<body>
<%- include('../partials/nav') %>
<div class="container mb-3">
<h2 class="mb-3"><b>Board</b></h2>
<table class="board-table table table-sm border-bottom shadow rounded">
<thead class="thead-light">
<tr>
<th scope="col" class="id">#</th>
<th scope="col">제목</th>
<th scope="col" class="views">조회수</th>
<th scope="col" class="views">추천수</th>
<th scope="col" class="profile">프로필</th>
<th scope="col" class="writer">작성자</th>
<th scope="col" class="date">작성일</th>
</tr>
</thead>
<tbody>
<% if(posts==null || posts.length==0) { %>
<tr>
<% if(error) { %>
<td colspan = 4> ⚠ <%= error %> </td>
<% } else { %>
<td colspan = 4> ⚠ There is no data to show. </td>
<% } %>
</tr>
<% } %>
<% posts.forEach(function(post) { %>
<tr>
<td class="id"><%= post.id %></td>
<td>
<a href="/board/<%= post.id %><%= getPostQueryString() %>" class="title-container">
<div data-search-highlight="title" class="title-ellipsis ellipsis float-left">
<span class="title-text"><%= post.title %></span>
</div>
</a>
</td>
<td class="views"><%= post.view %></td>
<td class="views"><%= post.recommand %></td>
<td class="profile"><img src="<%= post.User.profile %>" class="rounded-circle" alt="..." width=25 height=25></td>
<td class="writer">
<a href="/board<%= getPostQueryString(false, { searchType:'author!', searchText:post.User.user_name, page:1 }) %>">
<div data-search-highlight="author" class="ellipsis"><%= post.User ? post.User.user_name : "" %></div>
</a>
</td>
<td class="date">
<span data-date="<%= post.created_at %>"></span>
</td>
</tr>
<% }) %>
</tbody>
</table>
<div class="row mb-3">
<nav class="col-11">
<%
var offset = 2;
var previousBtnEnabled = currentPage > 1;
var nextBtnEnabled = currentPage < maxPage;
%>
<ul class="pagination pagination-sm justify-content-center align-items-center h-100 mb-0">
<li class="page-item <%= previousBtnEnabled?'':'disabled' %>">
<!-- disabled : 버튼 사용불가 -->
<a class="page-link" href="/board<%= getPostQueryString(false, {page:currentPage-1}) %>"
<%=previousBtnEnabled?'':'tabindex=-1' %>>«
<!-- tabindex : 시각적인 포커싱 -->
</a>
</li>
<% for(i = 1; i <= maxPage; i++ ){ %>
<% if( i == 1 || i == maxPage || (i >= currentPage - offset && i <= currentPage + offset )){ %>
<li class="page-item <%= currentPage==i?'active':'' %>">
<a class="page-link" href="/board<%= getPostQueryString(false, {page:i}) %>"><%= i %></a>
</li>
<% } else if( i == 2 || i == maxPage-1 ){ %>
<li>
<a class="page-link">...</a>
</li>
<% } %>
<% } %>
<li class="page-item <%= nextBtnEnabled?'':'disabled' %>">
<a class="page-link" href="/board<%= getPostQueryString(false, {page:currentPage+1}) %>"
<%=nextBtnEnabled?'':'tabindex=-1' %>>»
</a>
</li>
<!-- view에서는 res.locals의 항목들을 바로 사용할 수 있기때문에 res.locals.getPostQueryString가 아니라 getPostQueryString로 호출합니다. -->
</ul>
</nav>
<div>
<button type="button" onclick="loginCheck()" class="btn btn-secondary">New</button>
</div>
</div>
<form action="/board" method="get" class="post-index-tool">
<div class="form-row">
<div class="form-group col-3">
<label>Show</label>
<select name="limit" class="custom-select"
onchange="this.parentElement.parentElement.parentElement.submit()">
<!-- TEST용 <option value="1" <%=limit==1?'selected':'' %> > 1 posts</option> -->
<option value="5" <%=limit==5?'selected':'' %> > 5 posts</option>
<option value="10" <%=limit==10?'selected':'' %> > 10 posts</option>
<option value="20" <%=limit==20?'selected':'' %> > 20 posts</option>
</select>
</div>
<div class="form-group col-9">
<label>Search</label>
<div class="input-group">
<select name="searchType" class="custom-select">
<option value="title,body" <%= searchType=='title,body'?'selected':'' %>>제목, 내용</option>
<option value="title" <%= searchType=='title'?'selected':'' %>>제목</option>
<option value="body" <%= searchType=='body'?'selected':'' %>>내용</option>
<option value="author" <%= searchType=='author'?'selected':'' %>>작성자</option>
<!-- selected 속성은 페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션 -->
</select>
<input minLength="3" type="text" name="searchText" value="<%= searchText %>">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit">search</button>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
function loginCheck() {
if (!localStorage.getItem('access_token')) {
alert("Please login first.");
location.href = '/user/login';
} else { location.href = '/board/post/new'; }
}
</script>
<script src="/js/post/date.js" defer></script>
</body>
</html>