Commit | Line | Data |
---|---|---|
604b951e BA |
1 | <template lang="pug"> |
2 | main | |
3 | input#modalNews.modal(type="checkbox") | |
4 | div#newnewsDiv(role="dialog" data-checkbox="modalNews") | |
5 | .card | |
6 | label.modal-close(for="modalNews") | |
7 | textarea#newsContent( | |
8 | v-model="curnews.content" | |
9 | :placeholder="st.tr['News go here']" | |
10 | @input="adjustHeight" | |
11 | ) | |
12 | button(@click="sendNews()") {{ st.tr["Send"] }} | |
13 | #dialog.text-center {{ st.tr[infoMsg] }} | |
14 | .row | |
15 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 | |
16 | button( | |
17 | v-if="devs.includes(st.user.id)" | |
18 | @click="showModalNews" | |
19 | ) | |
20 | | {{ st.tr["Write news"] }} | |
21 | .news(v-for="n in sortedNewsList") | |
22 | h4 {{ formatDatetime(n.added) }} | |
23 | p(v-html="parseHtml(n.content)") | |
24 | div(v-if="devs.includes(st.user.id)") | |
25 | button(@click="editNews(n)") {{ st.tr["Edit"] }} | |
26 | button(@click="deleteNews(n)") {{ st.tr["Delete"] }} | |
27 | button(v-if="hasMore" @click="loadMore()") | |
28 | | {{ st.tr["Load more"] }} | |
29 | </template> | |
30 | ||
31 | <script> | |
32 | import { store } from "@/store"; | |
33 | import { ajax } from "@/utils/ajax"; | |
34 | import { getDate, getTime } from "@/utils/datetime"; | |
35 | import { processModalClick } from "@/utils/modalClick"; | |
36 | export default { | |
37 | name: "my-news", | |
38 | data: function() { | |
39 | return { | |
40 | devs: [1], //for now the only dev is me | |
41 | st: store.state, | |
42 | cursor: 0, //ID of last showed news | |
43 | hasMore: true, //a priori there could be more news to load | |
44 | curnews: {id:0, content:""}, | |
45 | newsList: [], | |
46 | infoMsg: "", | |
47 | }; | |
48 | }, | |
49 | created: function() { | |
50 | ajax("/news", "GET", {cursor:this.cursor}, (res) => { | |
51 | this.newsList = res.newsList; | |
52 | const L = res.newsList.length; | |
53 | if (L > 0) | |
54 | this.cursor = res.newsList[L-1].id; | |
55 | }); | |
56 | }, | |
57 | mounted: function() { | |
58 | document.getElementById("newnewsDiv").addEventListener("click", processModalClick); | |
59 | }, | |
60 | computed: { | |
61 | sortedNewsList: function() { | |
62 | return this.newsList.sort( (n1,n2) => n1.added - n2.added ); | |
63 | }, | |
64 | }, | |
65 | methods: { | |
66 | formatDatetime: function(dt) { | |
67 | const dtObj = new Date(dt); | |
68 | return getDate(dtObj) + " " + getTime(dtObj); | |
69 | }, | |
70 | parseHtml: function(txt) { | |
71 | return !txt.match(/<[/a-zA-Z]+>/) | |
72 | ? txt.replace(/\n/g, "<br/>") //no HTML tag | |
73 | : txt; | |
74 | }, | |
75 | adjustHeight: function() { | |
76 | const newsContent = document.getElementById("newsContent"); | |
77 | // https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length | |
78 | newsContent.style.height = "1px"; | |
79 | newsContent.style.height = (10+newsContent.scrollHeight)+"px"; | |
80 | }, | |
81 | resetCurnews: function() { | |
82 | this.curnews.id = 0; | |
83 | this.curnews.content = ""; | |
84 | // No need for added and uid fields: never updated | |
85 | }, | |
86 | showModalNews: function() { | |
87 | this.resetCurnews(); | |
88 | doClick('modalNews'); | |
89 | }, | |
90 | sendNews: function() { | |
91 | const edit = this.curnews.id > 0; | |
92 | this.infoMsg = "Processing... Please wait"; | |
93 | ajax( | |
94 | "/news", | |
95 | edit ? "PUT" : "POST", | |
96 | {news: this.curnews}, | |
97 | (res) => { | |
98 | if (edit) | |
99 | { | |
100 | let n = this.newsList.find(n => n.id == this.curnews.id); | |
101 | if (!!n) | |
102 | n.content = this.curnews.content; | |
103 | } | |
104 | else | |
105 | { | |
106 | const newNews = { | |
107 | content:this.curnews.content, | |
108 | added:Date.now(), | |
109 | uid: this.st.user.id, | |
110 | id: res.id | |
111 | }; | |
112 | this.newsList = this.newsList.concat([newNews]); | |
113 | } | |
114 | document.getElementById("modalNews").checked = false; | |
115 | this.infoMsg = ""; | |
116 | this.resetCurnews(); | |
117 | } | |
118 | ); | |
119 | }, | |
120 | editNews: function(n) { | |
121 | this.curnews.content = n.content; | |
122 | this.curnews.id = n.id; | |
123 | // No need for added and uid fields: never updated | |
124 | doClick('modalNews'); | |
125 | }, | |
126 | deleteNews: function(n) { | |
127 | if (confirm(this.st.tr["Are you sure?"])) | |
128 | { | |
129 | this.infoMsg = "Processing... Please wait"; | |
130 | ajax("/news", "DELETE", {id:n.id}, () => { | |
131 | const nIdx = this.newsList.findIndex(nw => nw.id == n.id); | |
132 | this.newsList.splice(nIdx, 1); | |
133 | this.infoMsg = ""; | |
134 | document.getElementById("modalNews").checked = false; | |
135 | }); | |
136 | } | |
137 | }, | |
138 | loadMore: function() { | |
139 | ajax("/news", "GET", {cursor:this.cursor}, (res) => { | |
140 | if (res.newsList.length > 0) | |
141 | { | |
142 | this.newsList = this.newsList.concat(res.newsList); | |
143 | const L = res.newsList.length; | |
144 | if (L > 0) | |
145 | this.cursor = res.newsList[L-1].id; | |
146 | } | |
147 | else | |
148 | this.hasMore = false; | |
149 | }); | |
150 | }, | |
151 | }, | |
152 | }; | |
153 | </script> | |
154 | ||
155 | <style lang="sass" scoped> | |
156 | [type="checkbox"].modal+div .card | |
157 | max-width: 767px | |
158 | max-height: 100% | |
159 | textarea#newsContent | |
160 | width: 100% | |
161 | min-height: 200px | |
162 | max-height: 100% | |
163 | #dialog | |
164 | padding: 5px | |
165 | color: blue | |
166 | </style> |