一週間の予約が出来るデモコードです。良かったらどうぞ😌。 #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";
})
}
タグ
0, Code, com, demo, https, ligaLgY-uZ, php, qiita, UI, watch, www, youtube, オリジナル, キッカケ, コード, こちら, こと, コメント, これ, ソース, デモ, プログラマー, 一, 予約, 今日, 台風, 営業, 妨害, 後, 感じ, 感覚, 投稿, 接近, 掲載, 方, 方法, 昔, 昨日, 時刻表, 朝, 欠陥, 理由, 確認, 職場, 肝心, 自分, 解除, 記載, 設計書, 訳, 選択, 部分, 駄目,
アーユーハッピー？
2020.11.28
退職を機に体調不良を整えようとインドの療養施設に滞在した際、肩こり、不眠、ストレスによる湿疹など延々と続く私の訴えをウンウンと聞き取った医師が最後に尋ねた言葉。
「それで、あなたは幸せなの？」。
虚を突かれ、思わずたじろぐ。私たちは何かを手に入れて幸せになろうとしている。モノ。お金。そして健康。でも手に入らなければ不幸なのか？例えば病人は不幸なのか？だとすれば私たちは皆、不幸にまみれて一生を終わるのだ。
だって病と死からは誰も逃れられないもの。でも本当は病人だって、モノやお金がなくたって幸せになれるはず。肝心なのは何かを手に入れることじゃない。ハッピーになること。
「ある」幸せがあるなら「ない」幸せがあったっていいじゃない。そう考えると意外なほどに心は浮き立つ。人生は自由だ。そしてどこまでも開かれている。
アーユーハッピー？
幸福論／ソー、エミコ・・・アー・ユー・ハッピー？ インドの病院の医師／稲垣えみ子
昔、録画していた情熱大陸を再度見る。このネタは昔書いたかものとつぶやいた事を再構築するという意味で書いている。この情熱大陸回のラストにナレーターが読む幸福論がじぶんは好きだなと思える。たまに忘れてしまうけどこの言葉はとても良いな、人生は自由だ。人生を狭めているのはじぶんの心だと、もっと気楽に生きていけるようにしたいと。
自分は稲垣えみ子さんのこの言葉に虚(きょう)を突かれたじろぎました。特に「ない」幸せがあったっていいじゃないという言葉に?
タグ
アー, あなた, インド, エミコ, えみ子, お金, こと, ストレス, ソー, ネタ, パス, ハッピー, もの, ユー, 一生, 不幸, 不眠, 不良, 人生, 体調, 何か, 健康, 再度, 医師, 幸せ, 幸福, 心, 情熱大陸, 意外, 手, 施設, 昔, 最後, 本当, 機, 死, 湿疹, 滞在, 病, 病人, 病院, 療養, 皆, 私, 稲垣, 肝心, 肩こり, 自由, 虚, 言葉, 誰, 退職, 録画, 際,
21lessons{レッスン}を読了？
2020.05.03
アマゾンの朗読サービスで21lessonsを読了。普通に読めば結構な時間を費やしそうだけど、３日か4日で朗読が完了した。朗読は途中から２倍速再生で聞いたのだけど情報は聞き取れたので、これからこの方法（２倍速）で朗読本は読んでいこうと思います。肝心の感想だけどサピエンス全史の方が面白いかなと思います。
この本はどちらかと言うと客観的には見ているもののユヴァル・ノア・ハラリ氏の宗教観やジェンダー感が繰り返し書かれているところが多かった、ユヴァル・ノア・ハラリ氏は世界の殆どのことは虚構なのだと言っている。これは間違っていないと思います、法律やマネーなんていうのは良い例で人々がルールを信じているから成り立つものだから。
これからどう生きていけば良いのかなどは明確な答えはユヴァル・ノア・ハラリ氏は言っていないものの、これからは人工知能などやバイオテクノロジーの進化により今までとは予想もしない世界になることだけは間違いないようです。
長生きすればその恩恵を受けれるかもしれない。
尚、客観的に21lessonsを解説しているサイトが合ったので紹介します。
21レッスン『図解』きょん
https://note.com/my_kyon_note/n/n88e9db42abf5
タグ
2, 21, ３, 4, lessons, アマゾン, こと, これ, サービス, サピエンス, ジェンダー, ところ, どちらか, のあ, バイオテクノロジー, ハラリ, マネー, もの, ユヴァル, ルール, レッスン, 世界, 予想, 人々, 人工, 例, 倍速, 全史, 再生, 完了, 宗教観, 情報, 感, 感想, 方, 方法, 明確, 時間, 普通, 朗読, 本, 殆ど, 法律, 知能, 答え, 結構, 肝心, 虚構, 読了, 途中, 進化,
QuartzJapan[クオーツジャパン]を知ってる？
2020.01.15
QuartzJapanを知ってる方はこの記事をスルーして大丈夫です。自分は今日知ったばかりです。クオーツジャパンとは簡単に言えば、これから先、世界で起こるHOTなサービスやテクノロジーなどの情報をメールとアプリで配信してくれるサービスです。
月額1000円で最新の情報が手に入るというのは良いかなと感じます。ただ自分、現在安定した収入がないので、契約を結びませんでしたがニューズピックスよりも情報が良さげかなと感じました。ニューズピックスは動画配信などに力を入れている為か肝心の記事は殆ど外部からのニュースでサイトを埋めている気がします。
実際、契約を結んでいないので評価し難いのですが朝と夕方に記事が毎日配信されるということです、サンプルを読む限り良い感じがします。ビジネスマンや最新の情報が読みたい人は下記より購買が可能になります。
なお、自分には一銭も収益は入りません…。
https://qz.com/japan/subscribe/payment/
タグ
1000, HOT, QuartzJapan, アプリ, クオーツ, こと, これ, サービス, サイト, サンプル, ジャパン, スルー, テクノロジー, ニュース, ビジネスマン, ピックス, メール, 一銭, 下記, 世界, 人, 今日, 先, 力, 動画, 収入, 収益, 可能, 夕方, 外部, 契約, 安定, 実際, 情報, 感じ, 手, 方, 最新, 月額, 朝, 殆ど, 毎日, 気, 為, 現在, 簡単, 肝心, 自分, 記事, 評価, 購買, 配信,
高知県津野町の天狗高原へ行ってきた( ﾟдﾟ )。
2016.08.22
高知県津野町の天狗高原へ行ってきた( ﾟдﾟ )。お一人様で。
津野町の天狗高原に行ってきたのですが
道中の道が狭い・・・・。
（愛媛県側から行けばそうでもないらしいです。）
肝心のカルストも観てきましたよ。それよりも山の景色が壮大な感じです。
もっと晴れていたらもっと良い感じがしましたが、あいにくの曇り空で
帰る頃には雨が降ってくる始末で・・・・。
やはり山の天気は変わりやすいのだと実感しました。
肝心のカルストの景色は取れていません。
カルストの岩ゴツゴツは見ましたが、高原は見ていないのです。
なので、写真がない。
山々の景色をパシャパシャ取ってきたので載せときます。
ちなみにカップルが5割、団体が1割、家族連れが3割、お一人様は1割と
言う比率になっています。
