8a3de76d2a0f5ed6d51d72f6f9193b12207ad144
[vchess.git] / client / src / views / News.vue
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,idx in sortedNewsList" :class="{margintop:idx>0}")
22 span.ndt {{ formatDatetime(n.added) }}
23 div(v-if="devs.includes(st.user.id)")
24 button(@click="editNews(n)") {{ st.tr["Edit"] }}
25 button(@click="deleteNews(n)") {{ st.tr["Delete"] }}
26 p(v-html="parseHtml(n.content)")
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 const timePart = getTime(dtObj);
69 // Show minutes but not seconds:
70 return getDate(dtObj) + " " + timePart.substr(0,timePart.lastIndexOf(":"));
71 },
72 parseHtml: function(txt) {
73 return !txt.match(/<[/a-zA-Z]+>/)
74 ? txt.replace(/\n/g, "<br/>") //no HTML tag
75 : txt;
76 },
77 adjustHeight: function() {
78 const newsContent = document.getElementById("newsContent");
79 // https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
80 newsContent.style.height = "1px";
81 newsContent.style.height = (10+newsContent.scrollHeight)+"px";
82 },
83 resetCurnews: function() {
84 this.curnews.id = 0;
85 this.curnews.content = "";
86 // No need for added and uid fields: never updated
87 },
88 showModalNews: function() {
89 this.resetCurnews();
90 doClick('modalNews');
91 },
92 sendNews: function() {
93 const edit = this.curnews.id > 0;
94 this.infoMsg = "Processing... Please wait";
95 ajax(
96 "/news",
97 edit ? "PUT" : "POST",
98 {news: this.curnews},
99 (res) => {
100 if (edit)
101 {
102 let n = this.newsList.find(n => n.id == this.curnews.id);
103 if (!!n)
104 n.content = this.curnews.content;
105 }
106 else
107 {
108 const newNews = {
109 content:this.curnews.content,
110 added:Date.now(),
111 uid: this.st.user.id,
112 id: res.id
113 };
114 this.newsList = this.newsList.concat([newNews]);
115 }
116 document.getElementById("modalNews").checked = false;
117 this.infoMsg = "";
118 this.resetCurnews();
119 }
120 );
121 },
122 editNews: function(n) {
123 this.curnews.content = n.content;
124 this.curnews.id = n.id;
125 // No need for added and uid fields: never updated
126 doClick('modalNews');
127 },
128 deleteNews: function(n) {
129 if (confirm(this.st.tr["Are you sure?"]))
130 {
131 this.infoMsg = "Processing... Please wait";
132 ajax("/news", "DELETE", {id:n.id}, () => {
133 const nIdx = this.newsList.findIndex(nw => nw.id == n.id);
134 this.newsList.splice(nIdx, 1);
135 this.infoMsg = "";
136 document.getElementById("modalNews").checked = false;
137 });
138 }
139 },
140 loadMore: function() {
141 ajax("/news", "GET", {cursor:this.cursor}, (res) => {
142 if (res.newsList.length > 0)
143 {
144 this.newsList = this.newsList.concat(res.newsList);
145 const L = res.newsList.length;
146 if (L > 0)
147 this.cursor = res.newsList[L-1].id;
148 }
149 else
150 this.hasMore = false;
151 });
152 },
153 },
154 };
155 </script>
156
157 <style lang="sass" scoped>
158 [type="checkbox"].modal+div .card
159 max-width: 767px
160 max-height: 100%
161 textarea#newsContent
162 margin: 0
163 width: 100%
164 min-height: 200px
165 max-height: 100%
166 #dialog
167 padding: 5px
168 color: blue
169 span.ndt
170 color: darkblue
171 padding: 0 5px 0 var(--universal-margin)
172 .margintop
173 margin-top: 25px
174 border-top: 1px solid grey
175 .news
176 padding-top: 10px
177 & > div
178 display: inline-block
179 @media screen and (max-width: 767px)
180 .margintop
181 margin-top: 10px
182 </style>