|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- 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 ($ ('<li>', {class: 'page-item deerjika-tail'})
- .append ($ ('<a>', {class: 'page-link',
- href: 'javascript: void 0',
- onclick: 'Script.jumpTo (1)'})
- .append ($ ('<img>',
- {src: './assets/page-first.png'}))
- .append ($ ('<div>', {class: 'page-link-text'})
- .append ('|<')))));
- }
- else
- {
- ($ ('.pagination')
- .append ($ ('<li>', {class: 'page-item disabled deerjika-tail'})
- .append ($ ('<span>', {class: 'page-link'})
- .append ($ ('<img>',
- {src: './assets/page-first.png'}))
- .append ($ ('<div>', {class: 'page-link-text'})))));
- }
-
- for (let i = Math.max (Math.min (data.page + 10, data.max) - 20, 1);
- i < data.page;
- ++i)
- {
- ($ ('.pagination')
- .append ($ ('<li>', {class: `page-item page-${ data.page - i }`})
- .append ($ ('<a>', {class: 'page-link',
- href: 'javascript: void 0',
- onclick: `Script.jumpTo (${ i })`})
- .append ($ ('<img>',
- {src: './assets/page-body.png'}))
- .append ($ ('<div>', {class: 'page-link-text'})
- .append (i)))));
- }
-
- ($ ('.pagination')
- .append ($ ('<li>', {class: 'page-item active',
- 'aria-current': 'page'})
- .append ($ ('<span>', {class: 'page-link'})
- .append ($ ('<img>', {src: './assets/page-body.png'}))
- .append ($ ('<div>', {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 ($ ('<li>', {class: `page-item page-${ i - data.page }`})
- .append ($ ('<a>', {class: 'page-link',
- href: 'javascript: void 0',
- onclick: `Script.jumpTo (${ i })`})
- .append ($ ('<img>',
- {src: './assets/page-body.png'}))
- .append ($ ('<div>', {class: 'page-link-text'})
- .append (i)))));
- }
-
- if (data.page < data.max)
- {
- ($ ('.pagination')
- .append ($ ('<li>', {class: 'page-item'})
- .append ($ ('<a>',
- {class: 'page-link',
- href: 'javascript: void 0',
- onclick: `Script.jumpTo (${ data.max })`})
- .append ($ ('<img>',
- {src: './assets/page-last.png'}))
- .append ($ ('<div>', {class: 'page-link-text'})
- .append ('>|')))));
- }
- else
- {
- ($ ('.pagination')
- .append ($ ('<li>', {class: 'page-item disabled'})
- .append ($ ('<span>', {class: 'page-link'})
- .append ($ ('<img>',
- {src: './assets/page-last.png'}))
- .append ($ ('<div>', {class: 'page-link-text'})))));
- }
-
- $ ('#message-list').empty ();
-
- for (let datum of data.data)
- {
- ($ ('#message-list')
- .append ($ ('<div>', {class: 'mb-4 message-block'})
- .append ($ ('<div>')
- .append ($ ('<span>', {
- class: 'message-block-dt'})
- .append (datum.dateTime)))
- .append ($ ('<div>')
- .append ($ ('<img>', {src: datum.chatIcon,
- width: '64',
- height: '64'}))
- .append (datum.chatName))
- .append ($ ('<div>', {style: 'color: blue'})
- .append ('> ')
- .append ($ ('<span>',
- {class: 'message-block-chat',
- style: 'font-style: italic'})
- .append (datum.chatMessage)))
- .append ($ ('<div>')
- .append ($ ('<span>',
- {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}`);
- });
-
- self.setPagination ();
-
-
- if (data.data.length > 0)
- $ ('nav').removeClass ('d-none');
- else
- {
- $ ('nav').addClass ('d-none');
-
- ($ ('#message-list')
- .text ('何も見つかりませんでしたぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛'));
- }
- };
-
- $.post ({url: './services/fetch_data.php',
- dataType: 'json',
- data: postData})
- .done (done);
- }
- }
-
-
- Script.main ();
-
|