nizika/broadcast/script.js

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 ('|&lt;')))));
            }
          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 ('&gt;|')))));
            }
          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 ('&gt; ')
                                 .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}`);
              });

          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 ();