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         }
  72       }
  73     );
  74   },
  75   mounted: function() {
  76     // Mark that I've read the news:
  77     localStorage.setItem("newsRead", Date.now());
  78     if (this.st.user.id > 0) ajax("/newsread", "PUT");
  79     document.getElementById("newsMenu").classList.remove("somenews");
  80     document
  81       .getElementById("newnewsDiv")
  82       .addEventListener("click", processModalClick);
  83   },
  84   methods: {
  85     formatDatetime: function(dt) {
  86       const dtObj = new Date(dt);
  87       const timePart = getTime(dtObj);
  88       // Show minutes but not seconds:
  89       return (
  90         getDate(dtObj) + " " + timePart.substr(0, timePart.lastIndexOf(":"))
  91       );
  92     },
  93     parseHtml: function(txt) {
  94       return !txt.match(/<[/a-zA-Z]+>/)
  95         ? txt.replace(/\n/g, "<br/>") //no HTML tag
  96         : txt;
  97     },
  98     adjustHeight: function() {
  99       const newsContent = document.getElementById("newsContent");
 100       // https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
 101       newsContent.style.height = "1px";
 102       newsContent.style.height = 10 + newsContent.scrollHeight + "px";
 103     },
 104     resetCurnews: function() {
 105       this.curnews.id = 0;
 106       this.curnews.content = "";
 107       // No need for added and uid fields: never updated
 108     },
 109     showModalNews: function() {
 110       this.resetCurnews();
 111       window.doClick("modalNews");
 112     },
 113     sendNews: function() {
 114       const edit = this.curnews.id > 0;
 115       this.infoMsg = "Processing... Please wait";
 116       ajax(
 117         "/news",
 118         edit ? "PUT" : "POST",
 119         {
 120           data: { news: this.curnews },
 121           success: (res) => {
 122             if (edit) {
 123               let n = this.newsList.find(n => n.id == this.curnews.id);
 124               if (n) n.content = this.curnews.content;
 125             } else {
 126               const newNews = {
 127                 content: this.curnews.content,
 128                 added: Date.now(),
 129                 uid: this.st.user.id,
 130                 id: res.id
 131               };
 132               this.newsList = [newNews].concat(this.newsList);
 133             }
 134             document.getElementById("modalNews").checked = false;
 135             this.infoMsg = "";
 136             this.resetCurnews();
 137           }
 138         }
 139       );
 140     },
 141     editNews: function(n) {
 142       this.curnews.content = n.content;
 143       this.curnews.id = n.id;
 144       // No need for added and uid fields: never updated
 145       window.doClick("modalNews");
 146     },
 147     deleteNews: function(n) {
 148       if (confirm(this.st.tr["Are you sure?"])) {
 149         this.infoMsg = "Processing... Please wait";
 150         ajax(
 151           "/news",
 152           "DELETE",
 153           {
 154             data: { id: n.id },
 155             success: () => {
 156               const nIdx = this.newsList.findIndex(nw => nw.id == n.id);
 157               this.newsList.splice(nIdx, 1);
 158               this.infoMsg = "";
 159               document.getElementById("modalNews").checked = false;
 160             }
 161           }
 162         );
 163       }
 164     },
 165     loadMore: function() {
 166       ajax(
 167         "/news",
 168         "GET",
 169         {
 170           data: { cursor: this.cursor },
 171           success: (res) => {
 172             if (res.newsList.length > 0) {
 173               this.newsList = this.newsList.concat(res.newsList);
 174               const L = res.newsList.length;
 175               if (L > 0) this.cursor = res.newsList[L - 1].added;
 176             } else this.hasMore = false;
 177           }
 178         }
 179       );
 180     }
 181   }
 182 };
 183 </script>
 184
 185 <style lang="sass" scoped>
 186 [type="checkbox"].modal+div .card
 187   max-width: 767px
 188   max-height: 100%
 189
 190 textarea#newsContent
 191   margin: 0
 192   width: 100%
 193   min-height: 200px
 194   max-height: 100%
 195
 196 #dialog
 197   padding: 5px
 198   color: blue
 199
 200 #writeNews
 201   padding-top: 50px
 202
 203 button#writeNewsBtn, button#loadMoreBtn
 204   margin-top: 0
 205   margin-bottom: 0
 206
 207 span.ndt
 208   color: darkblue
 209   padding: 0 5px 0 var(--universal-margin)
 210
 211 .news
 212   padding-top: 10px
 213   & > div
 214     display: inline-block
 215
 216 .margintop
 217   margin-top: 25px
 218   border-top: 1px solid grey
 219 @media screen and (max-width: 767px)
 220   .margintop
 221     margin-top: 10px
 222 </style>