Javaに関する様々な情報をご紹介します。

Javaに関する様々な情報をご紹介します。
評価

0

年間カレンダーで、稼働日のフラグ立てを行いたい

playframeworkを利用しています。
よろしくお願いします。

画面に年間カレンダーを表示し、マウスクリックで稼働日(1)or休日(0)の
フラグ立てを行い、DBに登録を行う処理を作成しています。
DBのカラムは[year, month, day, flg]です。

JavaScriptで画面にカレンダーを表示させるところまでは
gitを漁って作成できたのですが、フラグを登録する処理が
どうもわかりません。
何か良い考え方があれば、ご教示いただきたいです。

・JavaScript
$(function () {
    var calendarCreator = new CalendarCreator(document.getElementById('CalForm')); //コンストラクタにカレンダーを表示させたい要素を指定
    calendarCreator
        .setYear(document.getElementById('YEAR')) //表示したい年度を指定
        .setDisplayMonthList([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) //表示したい月を指定
        .setCustomDateList(['2018-01-04', '2018-12-13']) //独自の祝日を指定
        .setCustomClick(function () {
            console.log('click');
            console.log(this.getAttribute('id'));
        }) //独自のクリックイベントを指定
        .setCustomMouseOver(function () {
            console.log('mouseOver');
        }) //独自のマウスオーバーイベントを指定
        .setCustomMouseOut(function () {
            console.log('mouseOut');
        }) //独自のマウスアウトイベントを指定
        .create();
});

・ライブラリ
/**
 * カレンダーを生成するライブラリ
 */

/**
 * @param obj target HTML element
 */
function CalendarCreator(target)
{
    this.target           = target;
    this.year             = null;
    this.displayMonthList = {};
    this.dayName          = ['日', '月', '火', '水', '木', '金', '土'];
    this.dayNameEn        = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
    this.customClick      = null;
    this.customMouseOver  = null;
    this.customMouseOut   = null;
    this.customDateList   = {};
}

/**
 * @param string year Ex. '2017'
 * @return this
 */
CalendarCreator.prototype.setYear = function (year)
{
    this.year = year;
    return this;
}

/**
 * @param int[] array Ex. [1, 3, 12]
 * @return this
 */
CalendarCreator.prototype.setDisplayMonthList = function (array)
{
    for (var i = 0; i <= array.length; i++) {
            this.displayMonthList[array[i]] = array[i];
    }

    return this;
}

/**
 * @param string array Ex. ['2018-01-01', '2018-04-05']
 * @return this
 */
CalendarCreator.prototype.setCustomDateList = function (array)
{
    for (var i = 0; i <= array.length; i++) {
        this.customDateList[array[i]] = array[i];
    }

    return this;
}

/**
 * @param object func Ex. function () {}
 * @return this
 */
CalendarCreator.prototype.setCustomClick = function (func)
{
    this.customClick = func;
    return this;
}

/**
 * @param object func Ex. function () {}
 * @return this
 */
CalendarCreator.prototype.setCustomMouseOver = function (func)
{
    this.customMouseOver = func;
    return this;
}

/**
 * @param object func Ex. function () {}
 * @return this
 */
CalendarCreator.prototype.setCustomMouseOut = function (func)
{
    this.customMouseOut = func;
    return this;
}

CalendarCreator.prototype.create = function ()
{
    var dateList  = this._getDateList();

    var parentDiv = document.createElement('div');
    parentDiv.classList.add('calendar_parent');

    for (month in dateList) {
        var frameDiv = document.createElement('div');
        frameDiv.classList.add('calendar_frame');

        var table = document.createElement('table');
        table.style.borderCollapse = 'collapse';
        table.classList.add('calendar_table');

        var row   = Math.ceil((dateList[month].length / 7) + 1);
        var count = 0;

        var monthNameTr = document.createElement('tr');
        var monthNameTd = document.createElement('td');
        monthNameTd.innerText = month + '月';
        monthNameTd.classList.add('calendar_month');
        monthNameTd.setAttribute('colspan', '7');
        monthNameTr.appendChild(monthNameTd);
        table.appendChild(monthNameTr);

        for (var i = 0; i <= row; i++) {
            var isEmpty = true;
            var tr = document.createElement('tr');
            for (var j = 0; j < 7; j++) {
                date = null;
                if (0 === i) {
                    tr.classList.add('calendar_header');
                    var th = document.createElement('th');
                    th.classList.add(this.dayNameEn[j]);
                    th.innerText = this.dayName[j];
                    tr.appendChild(th);
                } else {
                    tr.classList.add('calendar_body');
                    var td = document.createElement('td');

                    if (undefined !== dateList[month][count]) {
                        var object = dateList[month][count];
                        if (this.dayNameEn[j] === object.day) {
                            td.classList.add(this.dayNameEn[j]);
                            td.setAttribute('id', object.ymd);
                            date = object.date;
                            count++;

                            if (true === (object.ymd in this.customDateList)) {
                                td.classList.add('calendar_custom_date');
                            }

                            if (null !== this.customClick) {
                                td.addEventListener('click', this.customClick);
                            }

                            if (null !== this.customMouseOver) {
                                td.addEventListener('mouseover', this.customMouseOver);
                            }

                            if (null !== this.customMouseOut) {
                                td.addEventListener('mouseout', this.customMouseOut);
                            }
                        }
                    }

                    td.innerText = date;
                    tr.appendChild(td);
                }

                if (null !== date || 0 === i) {
                    isEmpty = false;
                }
            }
            if (false === isEmpty) {
                table.appendChild(tr);
            }
        }

        frameDiv.appendChild(table);
        parentDiv.appendChild(frameDiv);
    }

    this.target.appendChild(parentDiv);
}

/**
 * @return object[]
 * Ex. [
 *    3 => [
 *      {day: 'wednesday', date: 3, ymd: '2018-01-03'},
 *      {day: 'monday', date: 14, ymd: '2018-05-14'}
 *    ],
 *    12 => [
 *      {day: 'wednesday', date: 3, ymd: '2018-01-03'},
 *      {day: 'monday', date: 14, ymd: '2018-05-14'}
 *    ]
 *  ]
 */
CalendarCreator.prototype._getDateList = function ()
{
    var year = (new Date()).getFullYear();
    if (null !== this.year) {
        year = (new Date(this.year + '-01-01')).getFullYear();
    }

    var dateList = {};
    for (var i = 0; i < 365; i++) {
        var date  = new Date(year + '-01-01');
        date.setDate(date.getDate() + i);
        var month = date.getMonth() + 1;

        if (false === (month in this.displayMonthList)
            && 0 !== Object.keys(this.displayMonthList).length
        ) {
            continue;
        }

        if (undefined === dateList[month]) {
            dateList[month] = [];
        }

        dateList[month].push({
            day:  this.dayNameEn[date.getDay()],
            date: date.getDate(),
            ymd: date.getFullYear() +
                '-' +
                this._formatNum(date.getMonth() + 1) +
                '-' +
                this._formatNum(date.getDate())
        });
    }

    return dateList;
}

/**
 * @param string value
 * @return string Ex. '1' -> '01', '12' -> '12'
 */
CalendarCreator.prototype._formatNum = function (value)
{
    if (1 === (new String(value)).length) {
        return '0' + value;
    }

    return value;
}


糸口でもいいので、教えてください。
どうぞよろしくお願い致します。

3

回答

101

閲覧

3件の回答

評価

0

とりあえず大きな部分から。
DBはサーバで読み書きを行い、JavaScriptはクライアントで実行される。
JavaScriptから直接DBを読み書きすることはできない。

DBへの読み書きは、
1. JavaScriptあるいはHTMLを使い、サーバへリクエストを送る
2. 別途作成したサーバ側で動作するWebアプリケーションでリクエストされた値をDBへ書き込む
3. 結果をクライアントへ返す
4. クライアントがその結果を表示する
といった手順を踏むことになる。
この仕組み自体をまずは理解しないと、いくら便利なフレームワークを用意してもなかなかモノを作ることはできない。

評価

0

匿名  2018-10-02 20:09:21 さん 回答ありがとうございます。
1, view
2, controllerで行われる処理
3, 2の処理のreturn
4, view
の手順の認識でいます。

普段は、HTMLのsubmitでFormの情報を登録/修正/削除を行っています。
しかし、今回は画面自体をJavaScriptで作成しようとした為
(一画面で”年”毎にカレンダーを表示を変化させたいので…)
nameやvalueの設定ができず悩んでいる状態です。

JavaScriptを利用してサーバーへリクエストを送る場合
ajaxというものがあるそうなので、調べて見ようかと思います。

評価

0

name/valueの設定は、例えば予めhiddenを持ったformを用意しておき、JavaScriptからDOMアクセスして書き換える。
別途OKボタンでもあるなら、そのタイミングでフラグのついた日付をかき集めてカンマ区切りにしたものをvalueに入れる仕組みでいける。
ただ、これだとOKし忘れると一切更新が行われないという、人に優しくないUIになってしまうので、やはりクリック時にAjaxで該当の日付を送信する方がいいだろうな。

とりあえず、ここはJavaの掲示板なので、対象はサーバ側の設計あるいはインターフェイス部分で、JavaScript単品のロジックは本来対象外だ。

回答する

ログインしていません。

ログインしなくても回答はできますが、ログインすると、質問・回答の管理、更新があった場合のメールでの通知を受けることができます。 アカウントをお持ちでない方は会員登録を行ってください。

ユーザ名匿名