ニジカもんすたぁ!! トップ・ページ https://nizika.monster
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

script.js 9.6 KiB

8 months ago
8 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. class
  2. Script
  3. {
  4. static
  5. main ()
  6. {
  7. const self = this;
  8. self.paramAsc = null;
  9. self.paramStart = null;
  10. self.paramEnd = null;
  11. self.paramQ = null;
  12. self.paramP = null;
  13. self.fetchData ();
  14. const dateOptions = {dateFormat: 'yy-mm-dd',
  15. firstDay: 6};
  16. $ ('#filter-date-start').datepicker (dateOptions);
  17. $ ('#filter-date-end').datepicker (dateOptions);
  18. const orderAsc = document.getElementById ('order-asc');
  19. const filterKeyword = document.getElementById ('filter-keyword');
  20. const btnFilter = document.getElementById ('btn-filter');
  21. const filter = function (e)
  22. {
  23. let dateStart = $ ('#filter-date-start').val ();
  24. let dateEnd = $ ('#filter-date-end').val ();
  25. if ((dateStart !== '')
  26. && (dateEnd !== '')
  27. && (dateStart > dateEnd))
  28. [dateStart, dateEnd] = [dateEnd, dateStart];
  29. self.paramAsc = orderAsc.checked ? '1' : '0';
  30. self.paramQ = filterKeyword.value;
  31. if (dateStart !== '')
  32. self.paramStart = dateStart;
  33. if (dateEnd !== '')
  34. self.paramEnd = dateEnd;
  35. self.paramP = null;
  36. self.fetchData ();
  37. };
  38. const resetFilter = function ()
  39. {
  40. self.paramAsc = null;
  41. self.paramStart = null;
  42. self.paramEnd = null;
  43. self.paramQ = null;
  44. self.paramP = null;
  45. self.fetchData ();
  46. };
  47. filterKeyword.addEventListener ('keydown',
  48. function (e)
  49. {
  50. if (e.key === 'Enter')
  51. filter (e);
  52. });
  53. btnFilter.addEventListener ('click', filter);
  54. $ ('#btn-reset').on ('click', resetFilter);
  55. $ (window).resize (this.setPagination);
  56. $ ('#accordion-filter').on ('shown.bs.collapse', function ()
  57. {
  58. $.cookie ('expand-filter', '1');
  59. });
  60. $ ('#accordion-filter').on ('hidden.bs.collapse', function ()
  61. {
  62. $.cookie ('expand-filter', '0');
  63. });
  64. if ($.cookie ('expand-filter') === '0')
  65. {
  66. $ ('#collapse-filter').removeClass ('show');
  67. $ ('#accordion-filter .accordion-button').addClass ('collapsed');
  68. }
  69. window.setInterval (function ()
  70. {
  71. self.fetchData ();
  72. }, 60000);
  73. }
  74. static
  75. jumpTo (page)
  76. {
  77. this.paramP = page;
  78. this.fetchData ();
  79. }
  80. static
  81. setPagination ()
  82. {
  83. for (let i = 1; i <= 20; ++i)
  84. $ (`.page-${i}`).removeClass ('d-none');
  85. for (let i = 20; i > 1; --i)
  86. {
  87. if (($ ('.pagination').width () < $ ('body').width () * .8)
  88. && ($ ('.page-item:not(.d-none)').length / 2 % 2 != 0))
  89. break;
  90. $ (`.page-${i}`).addClass ('d-none');
  91. }
  92. }
  93. static
  94. fetchData ()
  95. {
  96. const self = this;
  97. const postData = {}
  98. if (this.paramAsc != null)
  99. postData.asc = this.paramAsc;
  100. if (this.paramStart != null)
  101. postData.start = this.paramStart;
  102. if (this.paramEnd != null)
  103. postData.end = this.paramEnd;
  104. if (this.paramQ != null)
  105. postData.q = this.paramQ;
  106. if (this.paramP != null)
  107. postData.p = this.paramP;
  108. const done = function (data)
  109. {
  110. $ ('.pagination').empty ();
  111. if (data.page > 1)
  112. {
  113. ($ ('.pagination')
  114. .append ($ ('<li>', {class: 'page-item deerjika-tail'})
  115. .append ($ ('<a>', {class: 'page-link',
  116. href: 'javascript: void 0',
  117. onclick: 'Script.jumpTo (1)'})
  118. .append ($ ('<img>',
  119. {src: './assets/page-first.png'}))
  120. .append ($ ('<div>', {class: 'page-link-text'})
  121. .append ('|&lt;')))));
  122. }
  123. else
  124. {
  125. ($ ('.pagination')
  126. .append ($ ('<li>', {class: 'page-item disabled deerjika-tail'})
  127. .append ($ ('<span>', {class: 'page-link'})
  128. .append ($ ('<img>',
  129. {src: './assets/page-first.png'}))
  130. .append ($ ('<div>', {class: 'page-link-text'})))));
  131. }
  132. for (let i = Math.max (Math.min (data.page + 10, data.max) - 20, 1);
  133. i < data.page;
  134. ++i)
  135. {
  136. ($ ('.pagination')
  137. .append ($ ('<li>', {class: `page-item page-${ data.page - i }`})
  138. .append ($ ('<a>', {class: 'page-link',
  139. href: 'javascript: void 0',
  140. onclick: `Script.jumpTo (${ i })`})
  141. .append ($ ('<img>',
  142. {src: './assets/page-body.png'}))
  143. .append ($ ('<div>', {class: 'page-link-text'})
  144. .append (i)))));
  145. }
  146. ($ ('.pagination')
  147. .append ($ ('<li>', {class: 'page-item active',
  148. 'aria-current': 'page'})
  149. .append ($ ('<span>', {class: 'page-link'})
  150. .append ($ ('<img>', {src: './assets/page-body.png'}))
  151. .append ($ ('<div>', {class: 'page-link-text'})
  152. .append (data.page)))));
  153. for (let i = data.page + 1;
  154. i <= Math.min (Math.max (data.page - 10, 1) + 20, data.max);
  155. ++i)
  156. {
  157. ($ ('.pagination')
  158. .append ($ ('<li>', {class: `page-item page-${ i - data.page }`})
  159. .append ($ ('<a>', {class: 'page-link',
  160. href: 'javascript: void 0',
  161. onclick: `Script.jumpTo (${ i })`})
  162. .append ($ ('<img>',
  163. {src: './assets/page-body.png'}))
  164. .append ($ ('<div>', {class: 'page-link-text'})
  165. .append (i)))));
  166. }
  167. if (data.page < data.max)
  168. {
  169. ($ ('.pagination')
  170. .append ($ ('<li>', {class: 'page-item'})
  171. .append ($ ('<a>',
  172. {class: 'page-link',
  173. href: 'javascript: void 0',
  174. onclick: `Script.jumpTo (${ data.max })`})
  175. .append ($ ('<img>',
  176. {src: './assets/page-last.png'}))
  177. .append ($ ('<div>', {class: 'page-link-text'})
  178. .append ('&gt;|')))));
  179. }
  180. else
  181. {
  182. ($ ('.pagination')
  183. .append ($ ('<li>', {class: 'page-item disabled'})
  184. .append ($ ('<span>', {class: 'page-link'})
  185. .append ($ ('<img>',
  186. {src: './assets/page-last.png'}))
  187. .append ($ ('<div>', {class: 'page-link-text'})))));
  188. }
  189. $ ('#message-list').empty ();
  190. for (let datum of data.data)
  191. {
  192. ($ ('#message-list')
  193. .append ($ ('<div>', {class: 'mb-4 message-block'})
  194. .append ($ ('<div>')
  195. .append ($ ('<span>', {
  196. class: 'message-block-dt'})
  197. .append (datum.dateTime)))
  198. .append ($ ('<div>')
  199. .append ($ ('<img>', {src: datum.chatIcon,
  200. width: '64',
  201. height: '64'}))
  202. .append (datum.chatName))
  203. .append ($ ('<div>', {style: 'color: blue'})
  204. .append ('&gt; ')
  205. .append ($ ('<span>',
  206. {class: 'message-block-chat',
  207. style: 'font-style: italic'})
  208. .append (datum.chatMessage)))
  209. .append ($ ('<div>')
  210. .append ($ ('<span>',
  211. {class: 'message-block-answer'})
  212. .append (datum.answer)))));
  213. }
  214. $ ('.message-block').on ('click', function ()
  215. {
  216. const dt = $ (this).find ('.message-block-dt').text ();
  217. const chat = $ (this).find ('.message-block-chat').text ();
  218. const answer = $ (this).find ('.message-block-answer').text ();
  219. window.open (
  220. `./talk.php?dt=${dt}&chat=${chat}&answer=${answer}`);
  221. });
  222. self.setPagination ();
  223. if (data.data.length > 0)
  224. $ ('nav').removeClass ('d-none');
  225. else
  226. {
  227. $ ('nav').addClass ('d-none');
  228. ($ ('#message-list')
  229. .text ('何も見つかりませんでしたぬ゛ぅ゛ぅ゛ぅ゛ぅ゛ん゛'));
  230. }
  231. };
  232. $.post ({url: './services/fetch_data.php',
  233. dataType: 'json',
  234. data: postData})
  235. .done (done);
  236. }
  237. }
  238. Script.main ();