293 lines
12 KiB
HTML
293 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>岐阜ロゲwith FC岐阜 Myアルバム|岐阜aiネットワーク</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./style.css">
|
|
<link rel="stylesheet" href="./css/reset.css">
|
|
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
|
|
<script src="https://kit.fontawesome.com/94e0c17dd1.js" crossorigin="anonymous"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
|
|
<!-- drawer.css -->
|
|
<link rel="stylesheet" href="./css/drawer.min.css">
|
|
|
|
<!-- Meta -->
|
|
<meta name="description" content="岐阜ロゲin岐阜市のMyアルバムページです。">
|
|
<meta name="keywords" content="FC岐阜ロゲイニング map 岐阜aiネットワーク ran">
|
|
<meta name="robot" content="index,follow,noarchive">
|
|
<meta name="author" content="岐阜aiネットワーク">
|
|
<meta name="language" content="ja">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="favicon.png">
|
|
<style>
|
|
/* ここにCSSスタイルを記述 */
|
|
.view {
|
|
max-width: 1000px;
|
|
margin: 50px auto 20px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
section.view input,
|
|
button,
|
|
select {
|
|
font-size: 16px;
|
|
}
|
|
select,input{
|
|
padding: 4px;
|
|
}
|
|
|
|
div#photoList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-width: 1200px;
|
|
/* margin: 0 10px; */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.event-photo {
|
|
width: 100%;
|
|
max-width: calc(32.33% - 2px);
|
|
margin: 5px;
|
|
/* その他のスタイル */
|
|
}
|
|
.viewtop{
|
|
min-height: calc(50vh - 50px);
|
|
}
|
|
@media screen and (max-width:768px) {
|
|
.event-photo {
|
|
width: 100%;
|
|
max-width: calc(31% - 2px);
|
|
margin: 5px;
|
|
/* その他のスタイル */
|
|
}
|
|
.viewtop{
|
|
min-height: auto;
|
|
}
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div id="headerContent">
|
|
<div id="sp_headerContent">
|
|
<h1><a href="https://www.gifuai.net/"><img src="./img/rogo.png"></a></h1>
|
|
<a id="headerMenuBtn" href="#"><img src="./img/menu_open.svg" alt="メニューを開く"></a>
|
|
</div><!--sp_headerContent-->
|
|
<div id="headerMenu">
|
|
<h2>メニュー<a id="headerMenuClose" href="#"><img class="close" src="./img/btn_close_02.svg" alt="閉じる"></a>
|
|
</h2>
|
|
<!--ナビバー左側-->
|
|
<div class="left">
|
|
<ul class="utility">
|
|
<h1><a href="https://www.gifuai.net/"><img src="./img/rogo.png"></a></h1>
|
|
</ul>
|
|
</div><!--left-->
|
|
|
|
<!--ナビバー右側-->
|
|
<div class="right">
|
|
<ul class="utility">
|
|
<li><a href="https://www.gifuai.net/">ホーム</a></li>
|
|
<li><a href="https://www.gifuai.net/?page_id=60043">岐阜ロゲ</a></li>
|
|
<li><a href="https://www.gifuai.net/?page_id=4427">自治会SNS</a></li>
|
|
<li><a href="https://www.gifuai.net/?page_id=9370">会員・寄付金募集</a></li>
|
|
<li><a href="https://www.gifuai.net/?page_id=12434">フォトギャラリー</a></li>
|
|
<li><a href="https://www.gifuai.net/?page_id=52511">プレスリリース</a></li>
|
|
</ul>
|
|
</div><!--right-->
|
|
</div><!--headerMenu-->
|
|
</div><!--headerContent-->
|
|
</header>
|
|
<div class="to_classification">
|
|
<div class="to_class_box">
|
|
<div class="to_class_tebox">
|
|
<div class="to_class_text">
|
|
<h1>Myアルバム</h1>
|
|
</div>
|
|
</div>
|
|
<div class="to_class_img">
|
|
<img src="./img/title_event.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="viewtop">
|
|
<section class="view">
|
|
<!-- イベント選択 -->
|
|
<select id="eventSelect">
|
|
<option disabled="disabled" value="">イベント一覧</option>
|
|
<option selected="selected" value="FC岐阜">FC岐阜</option>
|
|
<!-- 他のイベントオプションを追加 -->
|
|
</select>
|
|
|
|
<!-- ゼッケン番号入力 -->
|
|
<input type="text" id="zekkenInput" placeholder="ゼッケン番号">
|
|
|
|
<!-- パスワード入力 -->
|
|
<input type="password" id="passwordInput" placeholder="パスワード">
|
|
|
|
<!-- 検索ボタン -->
|
|
<button onclick="searchPhotos()">写真リストを検索</button>
|
|
|
|
</section>
|
|
|
|
<!-- 結果表示エリア -->
|
|
<div id="photoList"></div>
|
|
</section>
|
|
<footer class="gifu_fotter">
|
|
<div class="footer_menubox">
|
|
<div><a href="https://www.gifuai.net/"><img src="./img/rogo.png"></a></div>
|
|
<div class="footer_menu">
|
|
<ul class="footer_menulink">
|
|
<li><a href="https://www.gifuai.net/">ホーム</a></li>
|
|
<li><a href="https://www.gifuai.net/?page_id=4806">information</a></li>
|
|
<li><a
|
|
href="https://docs.google.com/forms/d/e/1FAIpQLScEXBGEZroAR6F8z2OKhjXn74PhZ5bcSheZVlGlGjz12Iu1JA/viewform">お問い合わせ</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="footer_menulogo">
|
|
<li><a href="https://twitter.com/GifuK7"><img src="./img/Xlogo.svg" alt="Xロゴ"></a></li>
|
|
<li><a href="https://www.facebook.com/gifu.ai.network/"><img src="./img/facebook_logo.svg"
|
|
alt="Facebookロゴ"></a></li>
|
|
<li><a href="https://www.instagram.com/gifuainetwork/?igshid=MzMyNGUyNmU2YQ%3D%3D"><img
|
|
src="./img/Instagram_logo.svg" alt="instagramロゴ"></a></li>
|
|
<li><a href=""><img></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="f_copy">Copyright©NPO岐阜aiネットワーク</div>
|
|
</footer>
|
|
<script>
|
|
|
|
function searchPhotos() {
|
|
var selectedEvent = document.getElementById('eventSelect').value;
|
|
var selectedZekken = document.getElementById('zekkenInput').value;
|
|
var inputedPassword = document.getElementById('passwordInput').value;
|
|
|
|
// login関数を実行して写真リストを取得
|
|
login(selectedEvent, selectedZekken, inputedPassword);
|
|
}
|
|
|
|
async function Login(selectedEvent, selectedZekken, inputedPassword) {
|
|
const event = selectedEvent;
|
|
const identifier = selectedZekken;
|
|
const password = inputedPassword;
|
|
|
|
try {
|
|
const response = await fetch('/api/login/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
identifier: identifier, // メールアドレスまたはゼッケン番号
|
|
password: password
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'ログインに失敗しました');
|
|
}
|
|
|
|
// ログイン成功時の処理
|
|
localStorage.setItem('authToken', data.token);
|
|
localStorage.setItem('userData', JSON.stringify(data.user));
|
|
|
|
var URL = "/api/get_photo_list?event=" + selectedEvent + "&zekken=" + selectedZekken;
|
|
|
|
axios.get(URL)
|
|
.then(function (response) {
|
|
displayPhotos(response.data); // 写真リストを表示する関数にレスポンスオブジェクトを渡す
|
|
})
|
|
.catch(function (error) {
|
|
console.error("login function error: ", error);
|
|
});
|
|
|
|
} catch (error) {
|
|
// エラーメッセージを表示
|
|
errorMessage.textContent = error.message;
|
|
errorMessage.style.display = 'block';
|
|
} finally {
|
|
// 送信ボタンを再度有効化
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = 'ログイン';
|
|
}
|
|
}
|
|
|
|
// login関数内で写真リストをDOMに表示する処理を追加
|
|
function login_old(selectedEvent, selectedZekken, inputedPassword) {
|
|
var URL = "/api/get_photo_list?event=" + selectedEvent + "&zekken=" + selectedZekken;
|
|
|
|
axios.get(URL)
|
|
.then(function (response) {
|
|
displayPhotos(response.data); // 写真リストを表示する関数にレスポンスオブジェクトを渡す
|
|
})
|
|
.catch(function (error) {
|
|
console.error("login function error: ", error);
|
|
});
|
|
}
|
|
|
|
|
|
// 写真リストを表示する関数
|
|
function displayPhotos(response) {
|
|
var photoListDiv = document.getElementById('photoList');
|
|
photoListDiv.innerHTML = ''; // 既存の内容をクリア
|
|
|
|
// レスポンス全体をログに出力
|
|
console.log('Response object:', response);
|
|
|
|
// レスポンスオブジェクトからphoto_list配列を取得
|
|
var photos = response.photo_list;
|
|
|
|
// photo_listの内容をログに出力
|
|
console.log('Photo list array:', photos);
|
|
|
|
// 'photos'が配列であることを確認
|
|
if (Array.isArray(photos)) {
|
|
photos.forEach(function (photodata,index) {
|
|
// 各写真のURLをインデックス付きでログに出力
|
|
console.log(`Photo ${index + 1} data:`, photodata);
|
|
|
|
// photodataのプロパティの存在確認とcp_numberの条件チェック
|
|
if (!photodata.hasOwnProperty('photo_url') ||
|
|
!photodata.hasOwnProperty('cp_number') ||
|
|
photodata.cp_number <= 0) { // cp_numberが0以下の場合はスキップ
|
|
console.log(`Skipping photo at index ${index}. cp_number: ${photodata.cp_number}`);
|
|
return; // この写真をスキップ
|
|
}
|
|
|
|
// img要素を作成
|
|
var img = document.createElement('img');
|
|
img.src = photodata.photo_url; // 写真のURLをsrc属性に設定
|
|
img.className = 'event-photo'; // クラス名を設定
|
|
img.alt = 'Photo cp=${photodata.cp_number}'; // 代替テキストを設定
|
|
|
|
// 画像の読み込みエラーをキャッチ
|
|
img.onerror = function() {
|
|
console.error(`Failed to load image ${index + 1}:`, photodata.photorl);
|
|
};
|
|
|
|
// 画像を表示エリアに追加
|
|
photoListDiv.appendChild(img);
|
|
});
|
|
} else {
|
|
photoListDiv.innerHTML = 'ゼッケン番号とパスワードが一致していません。もう一度入力をお願いします。'
|
|
console.error('Expected photos to be an array, but received:', photos);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script src="jquery-2.1.3.min.js"></script>
|
|
|
|
<script src="./js/main.js"></script>
|
|
<link rel="stylesheet" href="./js/drawer.min.js">
|
|
</body>
|
|
|
|
</html> |