肝心 | Be Yourself

一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #php #code

2022.09.17

おはようございます、今日から台風接近らしいですね。この投稿は昨日書きました。

さて、一週間の予約（時刻表から）が出来るデモコードを書きました。これを書いたキッカケは昔の職場の方がこんな感じのUIを作られていたのを見て、自分も書いてみようと思いDEMOコードを朝起きて調べながら書きました。調べたことは選択を解除する方法だけで、後はオリジナルコードです、設計書も何もなく組み立ていきましたので、欠陥があるかもです。また、Qiitaにも記載しましたが、コメントをほぼ書いていません。書かずともプログラマーなら分かるだろうという感覚です。

肝心の確認部分は記載していないのにも訳があります。営業妨害になっては駄目だからです。そういう理由で確認部分以降は書いていません。

こちらにもソースコードを掲載しときますね。

<?php
ini_set("display_errors",0);
/**
 * @param array $holiday
 * @return string $str
 */
function fn_header($holiday = [])
{
    $str = "";
    $date = new DateTime();
    for ($i = 0; $i < 7; $i++) {
        !$i ? "" : $date->modify('+1 day');
        $w = $date->format("w");
        $tabindex = $i*7;
        $ho = (function ($days, $holiday = []) {
            return (array_search($days, $holiday) !== false) ? "holiday" : "";
        })($date->format("Y-m-d"), $holiday);
        $str .= "
        <th tabindex=$tabindex>
            <span class='header_no week_no_$w $ho'>" . $date->format("Y-m-d") . "</span>
        </th>";
    }
    return $str;
}
/**
 * @param int $h_min
 * @param int $h_max
 * @param int $m_interval
 * @param array $cnt
 * @param array $reserve
 * @param array $holiday
 * @return string $str
 */
function fn_time($h_min, $h_max, $m_interval,$cnt=[],$holiday = [], $reserve = [])
{
    $str= [];
    for ($h = $h_min; $h <= $h_max; $h++) {
        for ($m = 0; $m < 60; $m = $m + $m_interval) {
            print("<tr>\n");
            $date = new DateTime();
            for ($i = 0; $i < 7; $i++) {
                $cnt[$i]=!$cnt[$i]?(((($h_max - $h_min)+1)*(60/$m_interval))*($i))+7:(++$cnt[$i]);
                !$i ? "" : $date->modify('+1 day');
                $w = $date->format("w");
                $ho = (function ($days, $holiday = []) {
                    return (array_search($days, $holiday) !== false) ? "holiday" : "";
                })($date->format("Y-m-d"), $holiday);
                $time = sprintf("%02d:%02d",$h, $m);
                if ($ho) {
                    print("
                        <td class='' tabindex={$cnt[$i]}>
                            <span class='header_no week_no_$w $ho'>" . $time . "</span>
                        </td>");
                } else {
                    $r = (function ($days, $reserve = []) {
                        return (array_search($days, $reserve) !== false) ? "reserve" : "";
                    })($date->format("Y-m-d") . "_" . $time, $reserve);
                    if (!$r) {
                        print("
                            <td class='date_" . $date->format("Y-m-d") . "_{$time}' tabindex={$cnt[$i]} data-date='" . $date->format("Y-m-d") . "_{$time}'>
                                <a class='time_{$m}_" . $date->format("Y-m-d") . "_{$time}' data-sortno={$cnt[$i]}  href='#?data=" . $date->format("Y-m-d") . "_{$time}'><span class='header_no week_no_{$w} {$h}'>{$time}</span></a>
                            </td>");
                    } else {
                        print("
                            <td class='' tabindex={$cnt[$i]}>
                                <span class='header_no week_no_$w $r'>" . $time . "</span>
                            </td>");
                    }
                }
            }
            $date = null;
            print("</tr>\n");
        }
    }
    return "";
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>予約-時刻表(デモ版)</title>
    <style>
        table,tr,td{
            user-select: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h1 class="display-1">予約-時刻表<br></h1>
                <h5>{予約：時刻をクリックするか、<br>
                    左クリック選択状態で複数選択可能です<br>
                    （日付またぎは禁止しています）}</h5>
                <h5>{ダブルクリックすると予約画面に遷移します。<br>
                    ※DEMO版ですので予約登録画面は御座いません}</h5>
            </div>
        </div>
    </div>
    <div class="container-fluid  text-center">
        <div class="row">
            <div class="col-12">
                <table class="shadow-lg table table-hover table-bordered">
                    <thead>
                        <tr>
                            <?= fn_header() ?>
                        </tr>
                    </thead>
                    <tbody>
                        <?=fn_time(10, 20, 10,[],["2022-09-18","2022-09-23"],["2022-09-19_10:40","2022-09-19_10:50"]) ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
    <script src="./assets/js/main.js?<?=time()?>"></script>
</body>
</html>

let date_obj = document.querySelectorAll("td");
let submit_url = "https://example.com";
let is_date_data = [];
let cnt = 0;

date_obj.forEach(function (elm, key) {
    elm.addEventListener("mouseout", select_in_value);
    elm.addEventListener("click", sp_select_in_value);
    elm.addEventListener("touchend", sp_select_in_value);
    elm.addEventListener("dblclick", select_out_value);
});
function check_value(o, e) {
    if (is_date_data.length === 0) {
        return true;
    }
    let d = o.getAttribute("data-date");
    return d ? ((d) => {
        let f = is_date_data.find(element => {
            let pattern = new RegExp(d.split("_")[0]);
            return !element.match(pattern);
        }) ? false : true;
        if (!f) {
            select_clear(o, e);
            is_date_data = [];
            cnt = 0;
        }
        return f;
    })(d) : false;
}
function select_in_value(e) {
    if (e.buttons === 1 && check_value(this, e)) {
        if (this.getAttribute("data-date")) {
            this.style.backgroundColor = "#555";
            this.children[0].style.color = "#fff";
            if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
                is_date_data[cnt] = this.getAttribute("data-date");
                cnt++;
            }
        }
    }
}
function sp_select_in_value(e) {
    if (check_value(this, e)) {
        if (this.getAttribute("data-date")) {
            this.style.backgroundColor = "#555";
            this.children[0].style.color = "#fff";
            if (is_date_data.indexOf(this.getAttribute("data-date")) && is_date_data.indexOf(this.getAttribute("data-date"))) {
                is_date_data[cnt] = this.getAttribute("data-date");
                cnt++;
            }
        }
    }
}
function select_out_value(e) {
    if (is_date_data.length) {
        let is_data = is_date_data.map(function (elm, index) {
            return "date[" + index + "]=" + elm;
        });
        window.location.href = submit_url + "?" + is_data.join("&");
    }
}
function select_clear(o, e) {
    let is_ClassName = [];
    is_ClassName = is_date_data.map(function (d) {
        return "date_" + d;
    });
    is_ClassName.map(class_name => {
        document.getElementsByClassName(class_name)[0].style.backgroundColor = "#fff";
        document.getElementsByClassName(class_name)[0].children[0].style.color = "#0d6efd";
    })
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2022年09月17 06:00日

タグ

0, Code, com, demo, https, ligaLgY-uZ, php, qiita, UI, watch, www, youtube, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, 一, 予約, 今日, 台風, 営業, 妨害, 後, 感じ, 感覚, 投稿, 接近, 掲載, 方, 方法, 昔, 昨日, 時刻表, 朝, 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, 訳, 選択, 部分, 駄目,

アーユーハッピー？

2020.11.28

Logging

退職を機に体調不良を整えようとインドの療養施設に滞在した際、肩こり、不眠、ストレスによる湿疹など延々と続く私の訴えをウンウンと聞き取った医師が最後に尋ねた言葉。
「それで、あなたは幸せなの？」。
虚を突かれ、思わずたじろぐ。
私たちは何かを手に入れて幸せになろうとしている。モノ。お金。そして健康。でも手に入らなければ不幸なのか？例えば病人は不幸なのか？だとすれば私たちは皆、不幸にまみれて一生を終わるのだ。
だって病と死からは誰も逃れられないもの。でも本当は病人だって、モノやお金がなくたって幸せになれるはず。肝心なのは何かを手に入れることじゃない。ハッピーになること。
「ある」幸せがあるなら「ない」幸せがあったっていいじゃない。そう考えると意外なほどに心は浮き立つ。人生は自由だ。そしてどこまでも開かれている。
アーユーハッピー？
幸福論／ソー、エミコ・・・アー・ユー・ハッピー？インドの病院の医師／稲垣えみ子

昔、録画していた情熱大陸を再度見る。このネタは昔書いたかものとつぶやいた事を再構築するという意味で書いている。この情熱大陸回のラストにナレーターが読む幸福論がじぶんは好きだなと思える。たまに忘れてしまうけどこの言葉はとても良いな、人生は自由だ。人生を狭めているのはじぶんの心だと、もっと気楽に生きていけるようにしたいと。

自分は稲垣えみ子さんのこの言葉に虚(きょう)を突かれたじろぎました。特に「ない」幸せがあったっていいじゃないという言葉に?

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年11月28 05:41日

タグ

アー, あなた, インド, エミコ, えみ子, お金, こと, ストレス, ソー, ネタ, パス, ハッピー, もの, ユー, 一生, 不幸, 不眠, 不良, 人生, 体調, 何か, 健康, 再度, 医師, 幸せ, 幸福, 心, 情熱大陸, 意外, 手, 施設, 昔, 最後, 本当, 機, 死, 湿疹, 滞在, 病, 病人, 病院, 療養, 皆, 私, 稲垣, 肝心, 肩こり, 自由, 虚, 言葉, 誰, 退職, 録画, 際,

21lessons{レッスン}を読了？

2020.05.03

Logging

アマゾンの朗読サービスで21lessonsを読了。普通に読めば結構な時間を費やしそうだけど、３日か4日で朗読が完了した。朗読は途中から２倍速再生で聞いたのだけど情報は聞き取れたので、これからこの方法（２倍速）で朗読本は読んでいこうと思います。肝心の感想だけどサピエンス全史の方が面白いかなと思います。

この本はどちらかと言うと客観的には見ているもののユヴァル・ノア・ハラリ氏の宗教観やジェンダー感が繰り返し書かれているところが多かった、ユヴァル・ノア・ハラリ氏は世界の殆どのことは虚構なのだと言っている。これは間違っていないと思います、法律やマネーなんていうのは良い例で人々がルールを信じているから成り立つものだから。

これからどう生きていけば良いのかなどは明確な答えはユヴァル・ノア・ハラリ氏は言っていないものの、これからは人工知能などやバイオテクノロジーの進化により今までとは予想もしない世界になることだけは間違いないようです。

長生きすればその恩恵を受けれるかもしれない。

尚、客観的に21lessonsを解説しているサイトが合ったので紹介します。
21レッスン『図解』きょん
https://note.com/my_kyon_note/n/n88e9db42abf5

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年05月03 10:21日

タグ

2, 21, ３, 4, lessons, アマゾン, こと, これ, サービス, サピエンス, ジェンダー, ところ, どちらか, のあ, バイオテクノロジー, ハラリ, マネー, もの, ユヴァル, ルール, レッスン, 世界, 予想, 人々, 人工, 例, 倍速, 全史, 再生, 完了, 宗教観, 情報, 感, 感想, 方, 方法, 明確, 時間, 普通, 朗読, 本, 殆ど, 法律, 知能, 答え, 結構, 肝心, 虚構, 読了, 途中, 進化,

QuartzJapan[クオーツジャパン]を知ってる？

2020.01.15

Logging

QuartzJapanを知ってる方はこの記事をスルーして大丈夫です。自分は今日知ったばかりです。クオーツジャパンとは簡単に言えば、これから先、世界で起こるHOTなサービスやテクノロジーなどの情報をメールとアプリで配信してくれるサービスです。

月額1000円で最新の情報が手に入るというのは良いかなと感じます。ただ自分、現在安定した収入がないので、契約を結びませんでしたがニューズピックスよりも情報が良さげかなと感じました。ニューズピックスは動画配信などに力を入れている為か肝心の記事は殆ど外部からのニュースでサイトを埋めている気がします。

実際、契約を結んでいないので評価し難いのですが朝と夕方に記事が毎日配信されるということです、サンプルを読む限り良い感じがします。ビジネスマンや最新の情報が読みたい人は下記より購買が可能になります。
なお、自分には一銭も収益は入りません…。

https://qz.com/japan/subscribe/payment/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年01月15 03:53日

タグ

1000, HOT, QuartzJapan, アプリ, クオーツ, こと, これ, サービス, サイト, サンプル, ジャパン, スルー, テクノロジー, ニュース, ビジネスマン, ピックス, メール, 一銭, 下記, 世界, 人, 今日, 先, 力, 動画, 収入, 収益, 可能, 夕方, 外部, 契約, 安定, 実際, 情報, 感じ, 手, 方, 最新, 月額, 朝, 殆ど, 毎日, 気, 為, 現在, 簡単, 肝心, 自分, 記事, 評価, 購買, 配信,

高知県津野町の天狗高原へ行ってきた( ﾟдﾟ )。

2016.08.22

Logging

高知県津野町の天狗高原へ行ってきた( ﾟдﾟ )。お一人様で。
津野町の天狗高原に行ってきたのですが
道中の道が狭い・・・・。
（愛媛県側から行けばそうでもないらしいです。）
肝心のカルストも観てきましたよ。それよりも山の景色が壮大な感じです。
もっと晴れていたらもっと良い感じがしましたが、あいにくの曇り空で
帰る頃には雨が降ってくる始末で・・・・。
やはり山の天気は変わりやすいのだと実感しました。
肝心のカルストの景色は取れていません。
カルストの岩ゴツゴツは見ましたが、高原は見ていないのです。
なので、写真がない。
山々の景色をパシャパシャ取ってきたので載せときます。
ちなみにカップルが5割、団体が1割、家族連れが3割、お一人様は1割と
言う比率になっています。

</p>

〒785-0504 高知県高岡郡津野町芳生野乙４９２１−２２

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2016年08月22 06:00日

タグ

)。, カップル, カルスト, ゴツゴツ, それ, パシャパシャ, 写真, 団体, 壮大, 天気, 天狗高原, 始末, 実感, 家族, 山々, 愛媛, 感じ, 景色, 曇り空, 比率, 津野, 肝心, 芳生野乙, 連れ, 道中, 高原, 高岡, 高知,

高知県立歴史民俗資料館：前田博史天然写真展（企画展橅史（ブナシ））が期間限定で展示されている。ので。

2016.07.19

Logging

高知県立歴史民俗資料館：前田博史天然写真展（企画展：橅史（ブナシ））が期間限定（2016年、7月15日?9月19日）で展示されているので見に行ってきました。
高知県立歴史民俗資料館は9時から開館されている事をネットでチェックして実際、着いたのが9時半ぐらいです。早かったせいなのか。
駐車場は結構空いていた感じです。帰り際には８割ぐらい駐車してました。
肝心のブナシ展ですけど、お値段510円で結構安いかな、幻想的な写真が見られたのはお得感はあるものの、展示スペースが若干狭い為か、写真を観覧するのが若干、難でした。どちらかと言えば高知県立美術館の広さの展示スペースじゃないとゆっくり観覧する事が難しいじゃないかなぁと言う思いのまま、15分ぐらい観覧してました。
ブナシ展、観覧後、受付の人が３Fにある、総合展示場も見えますよとのことを聞いていたので、ついでに見に来ました。こちらは高知県の歴史が少し垣間みれた感があります・・・高知県市民は昔からお酒好きなんだなぁと・・・思った次第です。
感想、暑いなか、見に行ってきて良かったなと思います。高知県立歴史民俗資料館は涼しさと静かさがあり一日中、ココにいて「ぼけぇ?」っとしていたい感じのある館内です。
帰りに長宗我部元親のイケメン像を撮影して帰りましたが絶対、長宗我部元親はイケメンじゃなかったと思います。絶対に(｀・ω・´)。

著者名 @taoka_toshiaki

※この記事は著者が30代後半に書いたものです．

OFUSEで応援を送る

投稿日時 2016年07月19 06:00日

タグ

15, 19, 2016, ３, 510, 7, 8, ９, お得感, こちら, こと, スペース, チェック, どちらか, ネット, ブナシ, まま, 事, 人, 企画, 値段, 写真, 前田, 半, 博史, 受付, 天然, 実際, 少し, 展示, 帰り際, 感じ, 期間, 歴史, 民俗, 為, 県立, 総合, 美術館, 肝心, 若干, 観覧, 資料館, 開館, 限定, 難, 駐車, 駐車場, 高知, 高知県,

@Blog

過去の蓄積を見るために書く日記.

一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #php #code

アーユーハッピー？

21lessons{レッスン}を読了？

QuartzJapan[クオーツジャパン]を知ってる？

高知県津野町の天狗高原へ行ってきた( ﾟдﾟ )。

高知県立歴史民俗資料館：前田博史天然写真展（企画展橅史（ブナシ））が期間限定で展示されている。ので。