papa-download.js

'use strict';

const now = new Date();

const addDays = function(date, days) {
  const d = new Date(date);
  d.setDate(d.getDate() + days);
  return d;
};
const toYMD = function(date) {
  return date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
};

const yesterday = addDays(now, -1);
const tomorrow = addDays(now, 1);
const feedbacksFields = ["UserName", "Category", "Question", "Answer", "Feedback", "CreatedAt"];
const missingsFields = ["UserName", "Category", "Question", "CreatedAt"];

const model = {
  feedbacks: [],
  missings: [],
  mode: 'feedbacks',
  begin: toYMD(yesterday),
  end: toYMD(tomorrow),
};

const app = new Vue({
  el: '#app',
  data: model,
  methods: {
    search: function (e) {
      e.preventDefault();

      if (this.mode === 'feedbacks') {
        $.ajax({
          url: '/api/feedbacks',
          data: {
            begin: this.begin,
            end: this.end,
          },
          daatType: 'json'
        }).done(function (data) {
          model.feedbacks = data.rows;
        });
      } else if (this.mode === 'missings') {
        $.ajax({
          url: '/api/missings',
          data: {
            begin: this.begin,
            end: this.end,
          },
          daatType: 'json'
        }).done(function (data) {
          model.missings = data.rows;
        });
      }

    },
    download: function(e) {

      const mode = this.mode;
      const begin = this.begin;
      const end = this.end;
      const path = '/api/' + this.mode;
      const data = {
        begin: this.begin,
        end: this.end,
      };

      const fields = mode === 'feedbacks' ? feedbacksFields : missingsFields;
      const filename = mode + '_' + begin + '_' + end + '.csv';

      $.ajax({
        url: path,
        data: data
      }).done(function (data) {
        const lines = Papa.unparse({
          fields: fields,
          data: data.rows,
        });
        const uint8Array = Encoding.stringToCode(lines);
        const detected = Encoding.detect(uint8Array);
        const codeArray = Encoding.convert(uint8Array, {
          from: detected,
          to: 'SJIS'
        });
        if (navigator.msSaveBlob) {
          navigator.msSaveBlob(new Blob([new Uint8Array(codeArray)]), filename);
        } else {
          const uri = URL.createObjectURL(new Blob([new Uint8Array(codeArray)], { type: "octet/stream" }));
          const a = document.createElement('A');
          a.href = uri;
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      }).fail(function (e) {
        console.log(e);
      });

      // const errorHandler = function (e) {
      //   console.log('error', e);
      // };
      //
      // window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
      //
      // const cb = function(gb) {
      //   window.requestFileSystem(TEMPORARY, gb, function(fs) {
      //     fs.root.getFile('download.csv', { create: true }, function(fileEntry) {
      //
      //       const downloader = {
      //         fileEntry: fileEntry,
      //         cancel: false,
      //         count: 0,
      //         header: null,
      //         writeData: null,
      //         nextCursor: null,
      //         finalize: false,
      //         truncate: false,
      //         writer: null,
      //       };
      //
      //       downloader.get = function (cursor) {
      //         $.ajax({
      //           url: path,
      //           data: data
      //         }).done(downloader.ajaxCallback).fail(function (e) {
      //           console.log(e);
      //         });
      //       };
      //
      //       downloader.ajaxCallback = function(data) {
      //         const lines = Papa.unparse({
      //           fields: fields,
      //           data: data.rows,
      //         });
      //         const uint8Array = Encoding.stringToCode(lines);
      //         const detected = Encoding.detect(uint8Array);
      //         const codeArray = Encoding.convert(uint8Array, {
      //           from: detected,
      //           to: 'SJIS'
      //         });
      //         downloader.writeData = new Blob([new Uint8Array(codeArray)], { type: "octet/stream" });
      //         if (downloader.writer) {
      //           downloader.writer.write(downloader.writeData);
      //         } else {
      //           fileEntry.createWriter(downloader.createWriter);
      //         }
      //       };
      //
      //       downloader.createWriter = function(writer) {
      //         writer.onerror = errorHandler;
      //         writer.onwriteend = downloader.writeend;
      //         downloader.writer = writer;
      //         downloader.writer.write(downloader.writeData);
      //       };
      //
      //       downloader.writeend = function() {
      //         if (downloader.truncate) {
      //           const link = document.createElement('a');
      //           link.href = fileEntry.toURL();
      //           link.download = mode + '_' + begin + '_' + end + '.csv';
      //           document.body.appendChild(link);
      //           link.click();
      //           document.body.removeChild(link);
      //         // TODO: cursorが実装されたらやる
      //         // } else if (false) {
      //         //   const cursor = downloader.nextCursor;
      //         //   downloader.nextCursor = null;
      //         //   downloader.count++;
      //         //   downloader.get(cursor);
      //         // } else if (!downloader.finalize) {
      //         //   downloader.finalize = true;
      //         //   const footer = "8," + downloader.countAmount + "," + downloader.totalAmount + ",0,0,0,0,,,,,,,\n9,,,,,,,,,,,,,\n";
      //         //   downloader.writer.write(new Blob([footer]));
      //         } else {
      //           downloader.truncate = true;
      //           this.truncate(this.position);
      //         }
      //       };
      //
      //       downloader.get();
      //
      //     }, errorHandler);
      //   }, errorHandler);
      // };
      //
      //
      // if (navigator.webkitTemporaryStorage) {
      //   navigator.webkitTemporaryStorage.requestQuota(10 * 1024 * 1024, cb, errorHandler);
      // } else {
      //   cb(10 * 1024 * 1024);
      // }
    }
  },
  watch: {
  },
  mounted: function () {
  },
});

const navbarSupportedContent = new Vue({
  el: '#navbarSupportedContent',
  data: model,
  methods: {
  },
  watch: {
  },
  mounted: function () {

  },
});

papa-upload.js

(function(w, d, $) {
  const win = $(w);
  const doc = $(d);

  const MakeTd = function(text) {
    const ele = $("<td/>");
    ele.addClass("");
    ele.text(text);
    return ele;
  };

  doc.ready(function() {

    const form = doc.find("form.js-upload-item");
    const tbody = doc.find("tbody");
    const file = form.find('input[type="file"]');
    const csrfToken = $(document.body).data("csrf-token");
    const uploadButton = doc.find("button.btn-primary");

    uploadButton.attr('disabled', true);

    doc.on("click", "button.btn-info", function(e) {
      e.preventDefault();

      const btn = $(this);
      btn.data("default-text", btn.text());
      btn.text("処理開始");

      tbody.empty();

      const reader = new FileReader();
      reader.onload = function(event) {
        const src = new Uint8Array(event.target.result);
        const encoding = Encoding.detect(src);
        let dst = file.get(0).files[0];
        if (encoding == 'SJIS') {
          dst = Encoding.convert(src, {
            from: encoding,
            to: 'unicode',
            type: 'string'
          });
        }
        Papa.parse(dst, {
          header: true,
          skipEmptyLines: true,
          step: function(results, parser) {
            if (results.errors.length) {
              const tr = $("<tr/>");
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(""));
              tr.append(MakeTd(JSON.stringify(results.errors)));
              tbody.append(tr);
              return;
            }
            if (!results.data[0]["管理名"]) {
              return;
            }
            const item = {
              ID: results.data[0]["商品ID"],
              Name: results.data[0]["管理名"],
              Contents: [
                {
                  Version: parseInt(results.data[0]["バージョン"], 10),
                  Disabled: results.data[0]["注文停止"].toLowerCase() == 'true',
                  BeginTime: results.data[0]["適応日時"],
                  Label: results.data[0]["表示名"],
                  Price: parseInt(results.data[0]["定価"], 10),
                  Unit: results.data[0]["単位"],
                }
              ]
            };
            const tr = $("<tr/>");
            tr.append(MakeTd(item.ID));
            tr.append(MakeTd(item.Name));
            tr.append(MakeTd(item.Contents[0].Version));
            tr.append(MakeTd(item.Contents[0].Disabled));
            tr.append(MakeTd(item.Contents[0].BeginTime));
            tr.append(MakeTd(item.Contents[0].Label));
            tr.append(MakeTd(item.Contents[0].Price));
            tr.append(MakeTd(item.Contents[0].Unit));
            tr.append(MakeTd(""));
            tr.data('item', item);
            tbody.append(tr);
          },
          complete: function(results, file) {
            btn.text(btn.data("default-text"));
            uploadButton.attr('disabled', false);
          }
        });
      };
      reader.readAsArrayBuffer(file.get(0).files[0]);
    });


    doc.on("click", "button.btn-primary", function(e) {
      e.preventDefault();

      const btn = $(this);
      btn.data("default-text", btn.text());
      btn.text("処理中");
      btn.attr('disabled', true);

      const ajaxQueue = (function() {
        let previous = new $.Deferred().resolve();

        return {
          put: function(fn) {
            return (previous = previous.then(fn));
          },
        };
      })();

      tbody.find('tr').each(function () {
        const tr = $(this);
        const item = tr.data('item');
        ajaxQueue.put(function () {
          return $.ajax({
            url: "/item/upload/",
            type: "POST",
            headers: {
              "X-CSRF-Token": csrfToken
            },
            contentType: "application/json",
            data: JSON.stringify(item),
            dataType: "json"
          })
            .done(function() {
              tr.addClass('table-success').find('td:last').text('ok');
            })
            .fail(function(a, b, c) {
              tr.addClass('table-danger').find('td:last').text(c);
            });
        });
      });
      ajaxQueue.put(function () {
        btn.text(btn.data("default-text"));
      });
    });
  });
})(window, document, jQuery);