const vapidPublicKey = import.meta.env.VITE_VAPID_PUBLIC_KEY;

async function setupPushNotifications() {
    if (Notification.permission === 'granted') {
        try {
            // サービスワーカーを登録
            await navigator.serviceWorker.register('/assets/js/npush-service-worker.js').then(async(registration) => {
                if ('serviceWorker' in navigator && 'PushManager' in window) {
                    try {
                            const subscription = await registration.pushManager.subscribe({
                                userVisibleOnly: true,
                                applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
                            });
            
                            const response = await fetch('/save-subscription', {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
                                },
                                body: JSON.stringify(subscription),
                            });
            
                            if (!response.ok) throw new Error('サブスクリプションの保存に失敗しました');
            
                            new Notification('ご登録', {
                                body: 'ご登録有難う御座います',
                            });
                        
                    } catch (error) {
                        console.error('Push subscription error:', error);
                    }
                } else if (result !== 'granted') {
                    console.log('通知の権限が拒否されました。');
                }       
            });
            console.log('サービスワーカーが正常に登録されました');
        } catch (error) {
            console.error('サービスワーカーの登録に失敗しました:', error);
        }
    }
}


function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

document.getElementById('enable-notifications').addEventListener('click', async () => {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
        setupPushNotifications();
    } else {
        console.log('通知の権限が拒否されました。');
    }
});

        $endpoint = $request->endpoint;
        $token = $request->keys['auth'];
        $key = $request->keys['p256dh'];
        $user = $request->user();
        $user->updatePushSubscription($endpoint, $key, $token);

use App\Notifications\Reserved;
$user = User::find(1);
$user->notify(new Reserved($reservation));

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
const Evaluation = {
    props: {
      defaultActive: {
        type: Number,
        required: true
      },
      totalItems: {
        type: Number,
        required: true
      },
      avgVal:{
        type:Number,
        required:true
      }
    },
    data() {
      return {
        defaultActived: null,
        items: []
      };
    },
    created() {
      // HTMLから渡された値を基に、初期の状態を設定
      this.items = Array.from({ length: this.totalItems }, (v, i) =>{
        return (i + 1) <= this.defaultActive ? '★' : '☆';
      }
      );
    },
    methods: {
      // マウスが触れた時に☆を★に変える
      hover(index) {
        this.items = Array.from({ length: this.totalItems }, (v, i) =>
            i <= index ? '★' : '☆'
        );
        document.getElementById('evaluationVal').setAttribute('data-val',index);
      },
      // マウスが離れた時に元の値に戻す
      onclick() {       
        let i = Math.floor(document.getElementById('evaluationVal').getAttribute('data-val')) + 1;
         (async (i) =>{
            let frm = new FormData();
            frm.append('id',document.querySelector('#evaluation_id').getAttribute('data-id'));
            frm.append('val',i);
            let res = await fetch('/evaluation/index.php',{
                method:'post',
                body:frm
            }).then(result=>result.json());
            alert(res.msg);
            if(Math.floor(res.flg) === 1){
              const roundToDecimal = (number, decimalPlaces) =>{
                const multiplier = Math.pow(10, decimalPlaces);
                return Math.round(number * multiplier) / multiplier;
              } 
              document.getElementById('evaluationAvgVal').textContent = roundToDecimal(res.avgVal,2);
              this.defaultActived = res.avgVal;
              this.reRender();
            }
            
        })(i);
      }, 
      reRender() {
        // HTMLから渡された値を基に、初期の状態を設定
        this.items = Array.from({ length: this.totalItems }, (v, i) =>{
            return (i + 1) <= this.defaultActived ? '★' : '☆';
          }
        );
      }    
    },
    template: `
      <div>
        <span v-for="(item, index) in items" :key="index">
          <span
            @mouseover="hover(index)"
          >
            {{ item }}
          </span>
        </span>
        [<span  id='evaluationAvgVal'>{{this.avgVal}}</span>]
        <button @click="onclick()"
         id='evaluationVal'
         data-val='5'
         class='bbtn'
         title="★に触れることで評価の変更が出来ます．"
         >評価する</button>
      </div>
    `
  };
  const app = createApp({});
  app.component('evaluation', Evaluation);
  app.mount('#evaluation');

          <div id='app' class="page">
            <?php if (have_posts()):?>
                <div v-for="post in posts" :key="post.id" class="blogpage">
                  <h3>{{ post.title.rendered }}</h3>
                  <p> {{ formattedDate(post.date) }}</p>
                  <p v-html="post.content.rendered"></p>
                </div>
            <?php endif; ?>                
          </div>    
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/moment@2.30.1/min/moment.min.js"></script>
<script src="<?= get_template_directory_uri() ?>/asset/Infinity.js?<?=time()?>" type="module" ></script>

import { ref, onMounted, onUnmounted, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({
    setup() {

        const posts = ref([]);
        const page = ref(1);
        const loading = ref(false);
        const hasMore = ref(true);

        onMounted(async () => {
            await fetchPosts();

            if (window.innerWidth < 600) {
                window.addEventListener('scroll', handleScroll);
            } else {
                document.querySelector('#app').addEventListener('scroll', handleScroll);
            }

        });

        onUnmounted(() => {
            if (window.innerWidth < 600) {
                document.documentElement.removeEventListener('scroll', handleScroll);
            } else {
                document.querySelector('#app').removeEventListener('scroll', handleScroll);
            }
        });
        const formattedDate = (dateString) => {
            return moment(dateString).format('YYYY年MM月DD日');
        };

        const fetchPosts = async () => {
            if (loading.value || !hasMore.value) return;

            loading.value = true;
            try {
                const response = await axios.get(`/wp-json/wp/v2/posts?page=${page.value}`);
                if (response?.data?.length) {
                    posts.value = [...posts.value, ...response.data];
                    page.value++;
                    hasMore.value = true;
                }else{
                    hasMore.value = false;
                }

            } catch (error) {
                //console.error(error);
            } finally {
                loading.value = false;
            }
        };

        const handleScroll = async () => {
            let scrollHeight = null;
            let clientHeight = null;
            let scrollTop = null;

            if (window.innerWidth < 600) {
                scrollHeight = document.documentElement.scrollHeight;
                clientHeight = document.documentElement.clientHeight;
                scrollTop = document.documentElement.scrollTop;

            } else {
                scrollHeight = document.querySelector('#app').scrollHeight;
                clientHeight = document.querySelector('#app').clientHeight;
                scrollTop = document.querySelector('#app').scrollTop;
            }

            if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore.value) {
                await fetchPosts();
            }
        };
        return { posts, page, loading, hasMore, fetchPosts, handleScroll, formattedDate };
    }

}).mount('#app')

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test1");
        resolve(1);
    }, 15);
});
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test2");
        resolve(2);
    }, 11);
});
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test3");
        resolve(3);
    }, 16);
});
let p4 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test4");
        resolve(4);
    }, 1);
});
let p5 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("test5");
        resolve(5);
    }, 9);
});
(async()=>{
    let a = await Promise.all([p1, p2, p3, p4, p5]);
    console.log(a);
})()
 

node sample.js 'username' 'password' 'テスト投稿'

const puppeteer = require('puppeteer');

const [username, password ,tw] = process.argv.slice(2);

(async () => {
    
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.goto('https://twitter.com/login');

    await page.waitForTimeout(3000);
    await page.waitForSelector('input[autocomplete="username"]');
    await page.type('input[autocomplete="username"]', username);

    const divs = await page.$$('div[role="button"]');
    await divs[2].click();

    await page.waitForTimeout(3000);
    await page.waitForSelector('input[autocomplete="current-password"]');
    await page.type('input[autocomplete="current-password"]', password);
    

    await page.waitForSelector('div[data-testid="LoginForm_Login_Button"]');
    await page.click('div[data-testid="LoginForm_Login_Button"]');

    await page.waitForNavigation();

    console.log('Login successful');

    await page.waitForTimeout(3000);
    await page.waitForSelector('div[data-testid="tweetTextarea_0"]');
    await page.click('div[data-testid="tweetTextarea_0"]');
    

    await page.waitForSelector('div[data-testid="tweetTextarea_0"]');
    await page.type('div[data-testid="tweetTextarea_0"]',tw);
    await page.waitForTimeout(3000);

    await page.waitForSelector('div[data-testid="tweetButtonInline"]');
    await page.click('div[data-testid="tweetButtonInline"]');
    console.log('Tweet posted');                
    await browser.close();
})();

"use strict";
const main = (a,b,c)=>{
    return new Promise ((resolve)=>{
        console.log(a,b,c);
        b++;
        resolve({a:a,b:b,c:c}); 
    });
}
(async()=>{
    await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    // main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    console.log("fin");
})();

"use strict";
var csv = {
	load:async function(filename,id){
		const responseFile = await fetch(filename);
        const result = await responseFile.text()
		let separate1 = /\r\n/;
		let separate2 = ",";
		let data = (result.split(separate1)).map(function(value){
			return (value.split(separate2)).map(function(value1){
				return value1;
			});
		});
		let sum =[];
		for (const usedata of data) {
            (usedata).map(function(val,index,array){
                sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
            });
		}
        console.log(sum);
		document.getElementById(id).innerHTML = sum.join(",");
		return "OK";
	}
};
csv.load("math.csv?", "sum");

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

<script src="./assets/js/common.js"></script>

<script type="text/javascript" src="./assets/js/common.js"></script>

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

"use strict";
var a = 0;
const q1 = new Promise((zaru)=>{//zaru...名前付けは何でも良い（予約されているものでなければ
	a++;
	zaru(a + "1..");//データをまとめて返す
});
const q2 = new Promise((zaru)=>{
	a++;
	zaru(a + "2..");
});
const q3 = new Promise((zaru)=>{
	zaru("3~~~~n");
});
const qdaaaaaaaa = new Promise((zaru)=>{
	zaru([1,2,3,"Dahahaha!!"]);
});
Promise.all([q1,q2,q3,qdaaaaaaaa]).then((val)=>{
	console.log(val);
 }
);
qdaaaaaaaa.then((val)=>{
	console.log(val);
});

Array(4) [1, 2, 3, "Dahahaha!!"]
move.js:26
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"
Array(4) ["11..", "22..", "3~~~~n", Array(4)]
move.js:21
length:4
__proto__:Array(0) [, …]
0:"11.."
1:"22.."
2:"3~~~~n"
3:Array(4) [1, 2, 3, …]
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"