class Script { static main () { const self = this; self.paramAsc = null; self.paramStart = null; self.paramEnd = null; self.paramQ = null; self.paramP = null; self.fetchData (); const dateOptions = {dateFormat: 'yy-mm-dd', firstDay: 6}; $ ('#filter-date-start').datepicker (dateOptions); $ ('#filter-date-end').datepicker (dateOptions); const orderAsc = document.getElementById ('order-asc'); const filterKeyword = document.getElementById ('filter-keyword'); const btnFilter = document.getElementById ('btn-filter'); const filter = function (e) { let dateStart = $ ('#filter-date-start').val (); let dateEnd = $ ('#filter-date-end').val (); if ((dateStart !== '') && (dateEnd !== '') && (dateStart > dateEnd)) [dateStart, dateEnd] = [dateEnd, dateStart]; self.paramAsc = orderAsc.checked ? '1' : '0'; self.paramQ = filterKeyword.value; if (dateStart !== '') self.paramStart = dateStart; if (dateEnd !== '') self.paramEnd = dateEnd; self.paramP = null; self.fetchData (); }; const resetFilter = function () { self.paramAsc = null; self.paramStart = null; self.paramEnd = null; self.paramQ = null; self.paramP = null; self.fetchData (); }; filterKeyword.addEventListener ('keydown', function (e) { if (e.key === 'Enter') filter (e); }); btnFilter.addEventListener ('click', filter); $ ('#btn-reset').on ('click', resetFilter); $ (window).resize (this.setPagination); $ ('#accordion-filter').on ('shown.bs.collapse', function () { $.cookie ('expand-filter', '1'); }); $ ('#accordion-filter').on ('hidden.bs.collapse', function () { $.cookie ('expand-filter', '0'); }); if ($.cookie ('expand-filter') === '0') { $ ('#collapse-filter').removeClass ('show'); $ ('#accordion-filter .accordion-button').addClass ('collapsed'); } window.setInterval (function () { self.fetchData (); }, 60000); } static jumpTo (page) { this.paramP = page; this.fetchData (); } static setPagination () { for (let i = 1; i <= 20; ++i) $ (`.page-${i}`).removeClass ('d-none'); for (let i = 20; i > 1; --i) { if (($ ('.pagination').width () < $ ('body').width () * .8) && ($ ('.page-item:not(.d-none)').length / 2 % 2 != 0)) break; $ (`.page-${i}`).addClass ('d-none'); } } static fetchData () { const self = this; const postData = {} if (this.paramAsc != null) postData.asc = this.paramAsc; if (this.paramStart != null) postData.start = this.paramStart; if (this.paramEnd != null) postData.end = this.paramEnd; if (this.paramQ != null) postData.q = this.paramQ; if (this.paramP != null) postData.p = this.paramP; const done = function (data) { $ ('.pagination').empty (); if (data.page > 1) { ($ ('.pagination') .append ($ ('
  • ', {class: 'page-item deerjika-tail'}) .append ($ ('', {class: 'page-link', href: 'javascript: void 0', onclick: 'Script.jumpTo (1)'}) .append ($ ('', {src: './assets/page-first.png'})) .append ($ ('
    ', {class: 'page-link-text'}) .append ('|<'))))); } else { ($ ('.pagination') .append ($ ('
  • ', {class: 'page-item disabled deerjika-tail'}) .append ($ ('', {class: 'page-link'}) .append ($ ('', {src: './assets/page-first.png'})) .append ($ ('
    ', {class: 'page-link-text'}))))); } for (let i = Math.max (Math.min (data.page + 10, data.max) - 20, 1); i < data.page; ++i) { ($ ('.pagination') .append ($ ('
  • ', {class: `page-item page-${ data.page - i }`}) .append ($ ('', {class: 'page-link', href: 'javascript: void 0', onclick: `Script.jumpTo (${ i })`}) .append ($ ('', {src: './assets/page-body.png'})) .append ($ ('
    ', {class: 'page-link-text'}) .append (i))))); } ($ ('.pagination') .append ($ ('
  • ', {class: 'page-item active', 'aria-current': 'page'}) .append ($ ('', {class: 'page-link'}) .append ($ ('', {src: './assets/page-body.png'})) .append ($ ('
    ', {class: 'page-link-text'}) .append (data.page))))); for (let i = data.page + 1; i <= Math.min (Math.max (data.page - 10, 1) + 20, data.max); ++i) { ($ ('.pagination') .append ($ ('
  • ', {class: `page-item page-${ i - data.page }`}) .append ($ ('', {class: 'page-link', href: 'javascript: void 0', onclick: `Script.jumpTo (${ i })`}) .append ($ ('', {src: './assets/page-body.png'})) .append ($ ('
    ', {class: 'page-link-text'}) .append (i))))); } if (data.page < data.max) { ($ ('.pagination') .append ($ ('
  • ', {class: 'page-item'}) .append ($ ('', {class: 'page-link', href: 'javascript: void 0', onclick: `Script.jumpTo (${ data.max })`}) .append ($ ('', {src: './assets/page-last.png'})) .append ($ ('
    ', {class: 'page-link-text'}) .append ('>|'))))); } else { ($ ('.pagination') .append ($ ('
  • ', {class: 'page-item disabled'}) .append ($ ('', {class: 'page-link'}) .append ($ ('', {src: './assets/page-last.png'})) .append ($ ('
    ', {class: 'page-link-text'}))))); } $ ('#message-list').empty (); for (let datum of data.data) { ($ ('#message-list') .append ($ ('
    ', {class: 'mb-4 message-block'}) .append ($ ('
    ') .append ($ ('', { class: 'message-block-dt'}) .append (datum.dateTime))) .append ($ ('
    ') .append ($ ('', {src: datum.chatIcon, width: '64', height: '64'})) .append (datum.chatName)) .append ($ ('
    ', {style: 'color: blue'}) .append ('> ') .append ($ ('', {class: 'message-block-chat', style: 'font-style: italic'}) .append (datum.chatMessage))) .append ($ ('
    ') .append ($ ('', {class: 'message-block-answer'}) .append (datum.answer))))); } $ ('.message-block').on ('click', function () { const dt = $ (this).find ('.message-block-dt').text (); const chat = $ (this).find ('.message-block-chat').text (); const answer = $ (this).find ('.message-block-answer').text (); window.open ( `./talk.php?dt=${dt}&chat=${chat}&answer=${answer}`); }); if (data.data.length > 0) $ ('nav').removeClass ('d-none'); else { $ ('nav').addClass ('d-none'); ($ ('#message-list') .text ('何も見つかりませんでしたぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛')); } self.setPagination (); }; $.post ({url: './services/fetch_data.php', dataType: 'json', data: postData}) .done (done); } } Script.main ();