client/src/views/News.vue

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