Commit | Line | Data |
---|---|---|
604b951e BA |
1 | <template lang="pug"> |
2 | main | |
3 | input#modalNews.modal(type="checkbox") | |
910d631b BA |
4 | div#newnewsDiv( |
5 | role="dialog" | |
6 | data-checkbox="modalNews" | |
7 | ) | |
23e1fa07 | 8 | .card#writeNews |
604b951e BA |
9 | label.modal-close(for="modalNews") |
10 | textarea#newsContent( | |
11 | v-model="curnews.content" | |
12 | :placeholder="st.tr['News go here']" | |
13 | @input="adjustHeight" | |
14 | ) | |
15 | button(@click="sendNews()") {{ st.tr["Send"] }} | |
16 | #dialog.text-center {{ st.tr[infoMsg] }} | |
17 | .row | |
18 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
23e1fa07 | 19 | button#writeNewsBtn( |
a9e79351 | 20 | v-if="devTeam" |
604b951e BA |
21 | @click="showModalNews" |
22 | ) | |
23 | | {{ st.tr["Write news"] }} | |
910d631b BA |
24 | .news( |
25 | v-for="n,idx in newsList" | |
d85f259c | 26 | :id="'n' + n.id" |
910d631b BA |
27 | :class="{margintop:idx>0}" |
28 | ) | |
bd76b456 | 29 | span.ndt {{ formatDatetime(n.added) }} |
a9e79351 | 30 | .dev-buttons(v-if="devTeam") |
604b951e BA |
31 | button(@click="editNews(n)") {{ st.tr["Edit"] }} |
32 | button(@click="deleteNews(n)") {{ st.tr["Delete"] }} | |
d85f259c BA |
33 | button(@click="gotoPrevNext(n, 1)") {{ st.tr["Previous_n"] }} |
34 | button(@click="gotoPrevNext(n, -1)") {{ st.tr["Next_n"] }} | |
622e0fa8 | 35 | .news-content(v-html="parseHtml(n.content)") |
b3ef5759 | 36 | button#loadMoreBtn( |
910d631b BA |
37 | v-if="hasMore" |
38 | @click="loadMore()" | |
39 | ) | |
604b951e BA |
40 | | {{ st.tr["Load more"] }} |
41 | </template> | |
42 | ||
43 | <script> | |
44 | import { store } from "@/store"; | |
45 | import { ajax } from "@/utils/ajax"; | |
a9e79351 | 46 | import params from "@/parameters"; |
604b951e BA |
47 | import { getDate, getTime } from "@/utils/datetime"; |
48 | import { processModalClick } from "@/utils/modalClick"; | |
49 | export default { | |
50 | name: "my-news", | |
51 | data: function() { | |
52 | return { | |
604b951e | 53 | st: store.state, |
a9e79351 | 54 | devTeam: params.devs.include(store.state.user.id), |
0234201f BA |
55 | // timestamp of oldest showed news: |
56 | cursor: Number.MAX_SAFE_INTEGER, | |
57 | // hasMore == TRUE: a priori there could be more news to load | |
58 | hasMore: true, | |
6808d7a1 | 59 | curnews: { id: 0, content: "" }, |
604b951e | 60 | newsList: [], |
6808d7a1 | 61 | infoMsg: "" |
604b951e BA |
62 | }; |
63 | }, | |
64 | created: function() { | |
e57c4de4 BA |
65 | ajax( |
66 | "/news", | |
67 | "GET", | |
68 | { | |
69 | data: { cursor: this.cursor }, | |
70 | success: (res) => { | |
0234201f BA |
71 | // The returned list is sorted from most recent to oldest |
72 | this.newsList = res.newsList; | |
e57c4de4 | 73 | const L = res.newsList.length; |
0234201f | 74 | if (L > 0) this.cursor = res.newsList[L - 1].added; |
68e19a44 | 75 | else this.hasMore = false; |
e57c4de4 BA |
76 | } |
77 | } | |
78 | ); | |
604b951e BA |
79 | }, |
80 | mounted: function() { | |
d9a7a1e4 BA |
81 | // Mark that I've read the news: |
82 | localStorage.setItem("newsRead", Date.now()); | |
83 | if (this.st.user.id > 0) ajax("/newsread", "PUT"); | |
84 | document.getElementById("newsMenu").classList.remove("somenews"); | |
6808d7a1 BA |
85 | document |
86 | .getElementById("newnewsDiv") | |
87 | .addEventListener("click", processModalClick); | |
604b951e BA |
88 | }, |
89 | methods: { | |
90 | formatDatetime: function(dt) { | |
91 | const dtObj = new Date(dt); | |
bd76b456 BA |
92 | const timePart = getTime(dtObj); |
93 | // Show minutes but not seconds: | |
6808d7a1 BA |
94 | return ( |
95 | getDate(dtObj) + " " + timePart.substr(0, timePart.lastIndexOf(":")) | |
96 | ); | |
604b951e BA |
97 | }, |
98 | parseHtml: function(txt) { | |
99 | return !txt.match(/<[/a-zA-Z]+>/) | |
100 | ? txt.replace(/\n/g, "<br/>") //no HTML tag | |
101 | : txt; | |
102 | }, | |
103 | adjustHeight: function() { | |
104 | const newsContent = document.getElementById("newsContent"); | |
2c5d7b20 | 105 | // https://stackoverflow.com/a/995374 |
604b951e | 106 | newsContent.style.height = "1px"; |
6808d7a1 | 107 | newsContent.style.height = 10 + newsContent.scrollHeight + "px"; |
604b951e BA |
108 | }, |
109 | resetCurnews: function() { | |
110 | this.curnews.id = 0; | |
111 | this.curnews.content = ""; | |
112 | // No need for added and uid fields: never updated | |
113 | }, | |
d85f259c BA |
114 | gotoPrevNext: function(n, dir) { |
115 | document.getElementById("n" + n.id)[ | |
116 | (dir < 0 ? "previous" : "next") + "ElementSibling"].scrollIntoView(); | |
117 | }, | |
604b951e BA |
118 | showModalNews: function() { |
119 | this.resetCurnews(); | |
6808d7a1 | 120 | window.doClick("modalNews"); |
604b951e BA |
121 | }, |
122 | sendNews: function() { | |
123 | const edit = this.curnews.id > 0; | |
124 | this.infoMsg = "Processing... Please wait"; | |
e57c4de4 BA |
125 | ajax( |
126 | "/news", | |
127 | edit ? "PUT" : "POST", | |
128 | { | |
129 | data: { news: this.curnews }, | |
130 | success: (res) => { | |
131 | if (edit) { | |
132 | let n = this.newsList.find(n => n.id == this.curnews.id); | |
d85f259c | 133 | if (!!n) n.content = this.curnews.content; |
e57c4de4 BA |
134 | } else { |
135 | const newNews = { | |
136 | content: this.curnews.content, | |
137 | added: Date.now(), | |
138 | uid: this.st.user.id, | |
139 | id: res.id | |
140 | }; | |
141 | this.newsList = [newNews].concat(this.newsList); | |
142 | } | |
143 | document.getElementById("modalNews").checked = false; | |
144 | this.infoMsg = ""; | |
145 | this.resetCurnews(); | |
146 | } | |
604b951e | 147 | } |
e57c4de4 | 148 | ); |
604b951e BA |
149 | }, |
150 | editNews: function(n) { | |
151 | this.curnews.content = n.content; | |
152 | this.curnews.id = n.id; | |
153 | // No need for added and uid fields: never updated | |
6808d7a1 | 154 | window.doClick("modalNews"); |
604b951e BA |
155 | }, |
156 | deleteNews: function(n) { | |
6808d7a1 | 157 | if (confirm(this.st.tr["Are you sure?"])) { |
604b951e | 158 | this.infoMsg = "Processing... Please wait"; |
e57c4de4 BA |
159 | ajax( |
160 | "/news", | |
161 | "DELETE", | |
162 | { | |
163 | data: { id: n.id }, | |
164 | success: () => { | |
165 | const nIdx = this.newsList.findIndex(nw => nw.id == n.id); | |
166 | this.newsList.splice(nIdx, 1); | |
167 | this.infoMsg = ""; | |
168 | document.getElementById("modalNews").checked = false; | |
169 | } | |
170 | } | |
171 | ); | |
604b951e BA |
172 | } |
173 | }, | |
174 | loadMore: function() { | |
e57c4de4 BA |
175 | ajax( |
176 | "/news", | |
177 | "GET", | |
178 | { | |
179 | data: { cursor: this.cursor }, | |
180 | success: (res) => { | |
68e19a44 BA |
181 | const L = res.newsList.length; |
182 | if (L > 0) { | |
e57c4de4 | 183 | this.newsList = this.newsList.concat(res.newsList); |
68e19a44 | 184 | this.cursor = res.newsList[L - 1].added; |
e57c4de4 BA |
185 | } else this.hasMore = false; |
186 | } | |
187 | } | |
188 | ); | |
6808d7a1 BA |
189 | } |
190 | } | |
604b951e BA |
191 | }; |
192 | </script> | |
193 | ||
9493b395 | 194 | <style lang="sass"> |
604b951e BA |
195 | [type="checkbox"].modal+div .card |
196 | max-width: 767px | |
197 | max-height: 100% | |
910d631b | 198 | |
604b951e | 199 | textarea#newsContent |
bd76b456 | 200 | margin: 0 |
604b951e BA |
201 | width: 100% |
202 | min-height: 200px | |
203 | max-height: 100% | |
910d631b | 204 | |
604b951e BA |
205 | #dialog |
206 | padding: 5px | |
207 | color: blue | |
910d631b | 208 | |
23e1fa07 BA |
209 | #writeNews |
210 | padding-top: 50px | |
211 | ||
b3ef5759 | 212 | button#writeNewsBtn, button#loadMoreBtn |
0c76fa56 BA |
213 | margin-top: 0 |
214 | margin-bottom: 0 | |
910d631b | 215 | |
bd76b456 BA |
216 | span.ndt |
217 | color: darkblue | |
feae89d3 | 218 | padding: 0 5px 0 var(--universal-margin) |
910d631b | 219 | |
feae89d3 BA |
220 | .news |
221 | padding-top: 10px | |
622e0fa8 | 222 | & > .dev-buttons |
bd76b456 | 223 | display: inline-block |
622e0fa8 | 224 | & > .news-content |
9493b395 BA |
225 | margin: var(--universal-margin) |
226 | & > p | |
227 | margin: 10px 0 | |
228 | & > br | |
229 | display: block | |
230 | margin-top: 10px | |
231 | content: " " | |
910d631b BA |
232 | |
233 | .margintop | |
234 | margin-top: 25px | |
235 | border-top: 1px solid grey | |
bd76b456 BA |
236 | @media screen and (max-width: 767px) |
237 | .margintop | |
238 | margin-top: 10px | |
604b951e | 239 | </style> |