livelog-alpha/setlist.html at master · livelogjp/livelog-alpha · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ライブをメモするLivelog</title>
</head>
<body>

<p><a href="index.html" id="back">＜</a></p>

<hr>

<div id="form">

<h1 id="artist"></h1>

<div>SETLIST
<p><input type="text" id="track0" class="setlist"><button onclick="trackInputAdd(this);">+</button></p>
</div>

<button onclick="liveDataSave();">登録</button>
<button onclick="clickCancel();" id="cancel">キャンセル</button>
<p><button onclick="setlistDelete();">セットリストを削除</button></p>

</div>

<hr>

<p>Developed on <a href="https://github.com/livelogjp/livelog-alpha">GitHub</a>.</p>

<script>

function $(id){return document.getElementById(id);}

//☆エラーの時にフォームを消してエラー文言を表示する関数
function displayError() {
  var errorMessage = document.createElement('p');
  errorMessage.innerText = 'データが正常に読み込まれませんでした。';
  var errorLink = document.createElement('p');
  errorLink.innerHTML = '<a href="index.html">ライブ一覧へ戻る</a>';
  $('form').innerHTML = '';
  $('form').appendChild(errorMessage);
  $('form').appendChild(errorLink);
}

//☆既存のデータを読み込んでフォーム要素を表示する処理

// URLのパラメータから「?」を除いた文字列を取得
var urlParam = location.search.substring(1);

// URLにパラメータが存在する場合
if(urlParam) {
  // パラメータの「?」以降の文字列を「&」で分割して配列paramに代入
  var param = urlParam.split('&');

  var paramArray = [];

  //パラメータのaaa=bbbという部分をペアで取り出して連想配列paramArrayに代入
  for (i = 0; i < param.length; i++) {
    var paramItem = param[i].split('=');
    paramArray[paramItem[0]] = paramItem[1];
  }

  if(paramArray.live && paramArray.artist) {
    // live=xxというパラメータが存在したら、count番号にその値を代入
    var count = paramArray.live;
    var count2 = paramArray.artist;
    //戻るリンクとキャンセルボタンの遷移先を該当のライブ詳細画面へ変更
    $('back').setAttribute('href', 'detail.html?live=' + count);
    $('cancel').setAttribute('onclick', 'location.href="detail.html?live=' + count + '";');
    // その番号のデータを取り出してitemオブジェクトへ一次保存
    item = JSON.parse(
      localStorage.getItem('live' + count)
    );

    var artistID = 'artist' + count2;
    $('artist').innerText = item.artists[artistID].name;
    var dataSetlistNum = Object.keys(item.artists[artistID].setlist).length;
    //セットリストが1つ以上登録されていたら、1つ目の入力欄に値を挿入
    if (dataSetlistNum > 0) {
      $('track0').value = item.artists[artistID].setlist.track0;
    }
    if(dataSetlistNum > 1) {
      for(var i=1; i<dataSetlistNum; i++) {
        var currentTrackInput = document.getElementsByClassName('setlist')[i-1];
        var trackAddButton = currentTrackInput.nextElementSibling;
        var trackAddButton2 = currentTrackInput.nextElementSibling.nextElementSibling;
        //次の番号のセットリスト欄と「+」「-」ボタンを生成し、一つ前のセットリストの下段に挿入
        var nextTrackForm = document.createElement('p');
        nextTrackForm.innerHTML = '<input type="text" id="track' + i + '" class="setlist"><button onclick="trackInputAdd(this);">+</button><button onclick="trackInputDelete(this);">-</button>';
        currentTrackInput.parentNode.parentNode.appendChild(nextTrackForm);
        //一つ前のセットリスト横の「+」ボタンを削除
        currentTrackInput.parentNode.removeChild(trackAddButton);
        //一つ前のセットリスト横の「-」ボタンを削除
        if(trackAddButton2){
          currentTrackInput.parentNode.removeChild(trackAddButton2);
        }
        nextTrackId = 'track' + i;
        nextTrackInput = document.getElementsByClassName('setlist')[i];
        //追加したセットリスト欄に既存の値を入力
        nextTrackInput.value = item.artists[artistID].setlist[nextTrackId];
      }
    }

  } else {
    //live=xx,artist=yyのどちらかのパラメータがなかったらエラー表示
    displayError();
  }

} else {
  //URLにパラメータそのものがなかったらエラー表示
  displayError();
}

//☆セットリストの「+」ボタンが押された時の処理
function trackInputAdd(obj) {
  var currentInputId = obj.previousElementSibling.getAttribute('id');
  var currentTrackNum = Number(currentInputId.replace('track', ''));
  //次の番号の入力欄と「+」「-」ボタンを生成し、下の段に挿入
  var nextTrackInput = document.createElement('p');
  nextTrackInput.innerHTML = '<input type="text" id="track' + (currentTrackNum + 1) + '" class="setlist"><button onclick="trackInputAdd(this);">+</button><button onclick="trackInputDelete(this);">-</button>';
  obj.parentNode.parentNode.appendChild(nextTrackInput);
  //2回目以降については「+」ボタンの右横の「-」ボタンも削除する
  var currentInputDelete = obj.nextElementSibling;
  if (currentInputDelete){
    obj.parentNode.removeChild(currentInputDelete);
  }
  //クリックされた「+」ボタン自体は削除する
  obj.parentNode.removeChild(obj);
}

//☆「-」ボタンが押された時の処理
function trackInputDelete(obj) {
  var currentInputId = obj.previousElementSibling.previousElementSibling.getAttribute('id');
  var currentTrackNum = Number(currentInputId.replace('track', ''));
  //1個前のセットリスト入力欄の隣に「+」ボタンを追加
  var previousTrackInput = obj.parentNode.previousElementSibling;
  var previousTrackButton1 = document.createElement('button');
  previousTrackButton1.setAttribute('onclick', 'trackInputAdd(this);');
  previousTrackButton1.innerText = '+';
  previousTrackInput.appendChild(previousTrackButton1);
  //1個前のセットリスト入力欄の隣に「-」ボタンを追加（最初の入力欄の時は追加しない）
  if (currentTrackNum > 1) {
    var previousTrackButton2 = document.createElement('button');
    previousTrackButton2.setAttribute('onclick', 'trackInputDelete(this);');
    previousTrackButton2.innerText = '-';
    previousTrackInput.appendChild(previousTrackButton2);
  }
  //該当のセットリスト入力欄を削除
  var currentTrackInput = obj.parentNode;
  obj.parentNode.parentNode.removeChild(currentTrackInput);
}

//☆「登録」ボタンが押された時の処理
function liveDataSave() {

  //live=xxというパラメータを元にlocalStorageから該当データを読み込み
  item = JSON.parse(
    localStorage.getItem('live' + count)
  );

  //一曲目のセットリストをフォームの値から代入
  item.artists[artistID].setlist.track0 = $('track0').value;

  //フォームのセットリスト欄を配列として取得
  var allTrackNum = document.getElementsByClassName('setlist').length;
  var trackList = document.getElementsByClassName('setlist');

  //localStorageに保存されているセットリスト一覧を配列として取得
  var dataTrackNum = Object.keys(item.artists[artistID].setlist).length;
  var dataTrackList = Object.keys(item.artists[artistID].setlist);

  //複数のセットリスト欄が表示されている場合、track1以降の値をオブジェクトに代入
  if (allTrackNum > 1) {
    for(var i=1; i<allTrackNum; i++) {
      targetTrackId = trackList[i].id;
      item.artists[artistID].setlist[targetTrackId] = $(targetTrackId).value;
    }
  }

  //セットリスト欄が削除されていたら、削除分のセットリストを登録用オブジェクトから削除
  if (allTrackNum < dataTrackNum) {
    diffTrackNum = dataTrackNum - allTrackNum;
    deleteTrackList = dataTrackList.splice(allTrackNum, diffTrackNum);
    for (var j in deleteTrackList) {
      var deleteTrackId = deleteTrackList[j];
      delete item.artists[artistID].setlist[deleteTrackId];
    }
  }

  //登録用オブジェクトの内容をcount番号のlocalStorageへ上書き保存
  localStorage.setItem(
    'live' + count,
    JSON.stringify(item)
  );
  //登録後、一覧画面へ遷移
  location.href = 'detail.html?live=' + count;

}

//☆「キャンセル」ボタンが押された時の処理
function clickCancel() {
  location.href = 'detail.html?live=' + count;
}

//☆「このセットリストを削除」ボタンが押された時の処理
function setlistDelete() {
  //確認ダイアログで「OK」を押したら処理を実行
  if(window.confirm('セットリストを削除してよろしいですか？')){
    //live=xxというパラメータを元にlocalStorageから該当データを読み込み
    item = JSON.parse(
      localStorage.getItem('live' + count)
    );
    //該当のアーティストのセットリストを初期化
    item.artists[artistID].setlist = {};
    //登録用オブジェクトの内容をcount番号のlocalStorageへ上書き保存
    localStorage.setItem(
      'live' + count,
      JSON.stringify(item)
    );
    //削除実行後、一覧画面へ遷移
    location.href = 'detail.html?live=' + count;
  }
}

</script>

</body>
</html>