LoginSignup
0
0
@ka20220728

駅すばあと

Last updated at Posted at 2024-06-17

index.html





  
  
  
 
駅すばあと


  駅コード検索
  駅名：
  駅コード検索ボタン
  駅コード：
  
  経路検索
  開始：
   
  到達：
   
  経路検索ボタン

index.js



async function callApiCode() {

  // "%E5%B7%9D%E5%8F%A3%E9%A7%85";
  const stationName = "&name=" + document.getElementById("stationName").value;
  const type = "&type=" + "train";
  const res = await fetch("https://api.ekispert.jp/v1/json/station/light?key=0123456789123456" + stationName + type);

  const resp = await res.json();
  var status = res.status;
  document.getElementById("code").value = "";
  if (status = 400) {
    var errorMesg;
    var altMesg;
    errorMesg = resp.ResultSet.Error;
    if (errorMesg != undefined) {
      altMesg = errorMesg.Message;
      alert(altMesg);
    }
  }
  if (resp.ResultSet.Point != undefined) {
    var code;
    if (resp.ResultSet.Point instanceof Array) {
      code = resp.ResultSet.Point[0].Station.code;
    } else {
      code = resp.ResultSet.Point.Station.code;
    }
    document.getElementById("code").value = code;
  }
};

async function callApiRuter() {
  // https://api.ekispert.jp/v1/xml/operationLine?key=0123456789123456 JR電車
  // viaList: 東京:川口
  // date: 20240603
  // searchType: plain
  // sort: teiki
  // answerCount: 20
  // conditionDetail: T3111133232329:F3321121122000:A23121141:
  // key=0123456789123456&name=t&type=train:plane:ship:bus.connection:bus.highway:bus.midnight

  const url = "https://api.ekispert.jp/v1/json/search/course/extreme?key=0123456789123456";
  const fromST = document.getElementById("stationFrom").value;
  const toST = document.getElementById("stationTo").value;
  const viaList = "&viaList=" + fromST + ":" + toST;
  const date = "&date=" + "20240603";
  const searchType = "&searchType=" + "plain";
  const sort = "&sort=" + "teiki";
  const answerCount = "&answerCount=" + "20";
  const conditionDetail = "&conditionDetail=" + "T3111133232329:F3321121122000:A23121141:";

  const res = await fetch(url + viaList + date + searchType + sort + answerCount + conditionDetail);
  var status = res.status;
  const resp = await res.json();

  var courseInfoHtml = document.getElementById("courseInfo");
  courseInfoHtml.innerHTML = "";

  document.getElementById('stationList:1').innerHTML = "";
  document.getElementById('stationList:2').innerHTML = "";

  if (status = 400) {
    var errorMesg;
    var altMesg;
    errorMesg = resp.ResultSet.Error;
    if (errorMesg != undefined) {
      errorMesg.Message instanceof Array ? altMesg = errorMesg.Message[0].text : altMesg = errorMesg.Message
      alert(altMesg);
      return;
    }

  }
  // 松戸営業所／京成ﾊﾞｽ
  // 松戸駅／京成ﾊﾞｽ
  if (status = 200) {
    // console.log(resp);
    var displayRuterInfo;
    var courses = resp.ResultSet.Course;
    var innerHtmlStr = '';

    if (courses != undefined) {

      var coursesArry = new Array();
      courses instanceof Array ? coursesArry = courses : coursesArry.push(courses);
      // 経路情報取得
      coursesArry.forEach((course, index) => {
        var btName = '非表示'
        index == 0 ? btName = '非表示' : btName = '表示';
        var classDisplay = '"display:block"';
        index == 0 ? classDisplay = '"display:block"' : classDisplay = '"display:none"';

        innerHtmlStr = innerHtmlStr + ' ' + ('00' + parseInt(index + 1)).slice(-2) + ' ' + btName + ''
        innerHtmlStr = innerHtmlStr + '';
        displayRuterInfo = ""

        var lines = course.Route.Line;
        var points = course.Route.Point;
        // ポイント情報取得
        points.forEach((point, index) => {
          var linesName = ''
          if (lines instanceof Array) {
            if (index < Object.keys(lines).length) {
              linesName = ':' + lines[index].Name + ':' + lines[index].direction + ':';

            } else {
              linesName = '';
            }
          } else {
            index == 0 ? linesName = ':' + lines.Name + ':' + lines.direction + ':' : '';
          }
          displayRuterInfo = displayRuterInfo + point.Station.Name + linesName;
        })
        innerHtmlStr = innerHtmlStr + '' + parseInt(index + 1) + '. 経路：' + displayRuterInfo + '';
        innerHtmlStr = innerHtmlStr + '所要時間 (乗車 ：' + course.Route.timeOnBoard + ' その他 ：' + course.Route.timeOther + ' 徒歩 ：' + course.Route.timeWalk + ')分' + '';
        innerHtmlStr = innerHtmlStr + '距離 ：' + (parseInt(course.Route.distance) / 10).toString() + ' km' + '';
        innerHtmlStr = innerHtmlStr + '乗換回数 ：' + course.Route.transferCount + '';
        var price = course.Price;
        var fareSummary;
        var teiki1 = 0;
        var teiki2 = 0;
        var teiki3 = 0;
        price.forEach((value) => {
          if (value.kind == "FareSummary") { fareSummary = value.Oneway; };
          if (value.Oneway != undefined) {
            if (value.kind == "Teiki1Summary") { teiki1 = teiki1 + parseInt(value.Oneway); };
            if (value.kind == "Teiki3Summary") { teiki2 = teiki2 + parseInt(value.Oneway); };
            if (value.kind == "Teiki6Summary") { teiki3 = teiki3 + parseInt(value.Oneway); };
          }
        });
        innerHtmlStr = innerHtmlStr + ' 片道金額 ：' + fareSummary + '';
        innerHtmlStr = innerHtmlStr + ' 一か月定期代金 ：' + teiki1 + '';
        innerHtmlStr = innerHtmlStr + '； 三か月定期代金 ：' + teiki2 + '';
        innerHtmlStr = innerHtmlStr + '； 六か月定期代金 ：' + teiki3 + '';

      });
      courseInfoHtml.innerHTML = innerHtmlStr
    }
  }
};
// ボタン表示制御
function callHidden(index) {
  var divHtml = document.getElementById('routeDIV' + index);
  var btnHtml = document.getElementById('buttonDisplay' + index);
  divHtml.getAttribute('style') == 'display:none' ? divHtml.setAttribute('style', 'display:block') : divHtml.setAttribute('style', 'display:none');
  btnHtml.innerHTML == '非表示' ? btnHtml.innerHTML = '表示' : btnHtml.innerHTML = '非表示';
}
// 駅名検索
async function searchST(num) {
  var inputword
  num.toString() == '1' ? inputword = document.getElementById("stationFrom").value : inputword = document.getElementById("stationTo").value

  // console.log('onchange:', inputword);
  var div_stationList = document.getElementById('stationList:' + num);
  div_stationList.innerHTML = "";
  if (inputword != '') {
    div_stationList.setAttribute('style', 'display:block;background-color:#F5F5F5;padding-top:15px;padding-bottom:15px;margin: 0 20px 0 20px;')
    var url = 'https://api.ekispert.jp/v1/json/station/light?key=0123456789123456&name=' + inputword + '&type=train:plane:ship:bus.connection:bus.highway:bus.midnight'
    const res = await fetch(url);
    var status = res.status;

    const resp = await res.json();
    div_stationList.innerHTML = serchLists(resp.ResultSet, num)

  } else {
    div_stationList.setAttribute('style', 'display:none')
  }
}

function inputMethod(index, num) {
  var inputTextBox
  num.toString() == '1' ? inputTextBox = document.getElementById("stationFrom") : inputTextBox = document.getElementById("stationTo")
  console.log(inputTextBox);
  inputTextBox.value = document.getElementById('stationRow:' + index).innerHTML
  clearWord(num);
}
// 駅名リスト作る
function serchLists(resp, num) {
  var retString = ''
  var respPiont = new Array();

  if (resp.Point == undefined) { return retString; }

  var courseInfoHtml = document.getElementById("courseInfo");
  courseInfoHtml.innerHTML = "";

  resp.Point instanceof Array ? respPiont = resp.Point : respPiont.push(resp.Point);
  var trainSTNum = 0;
  var busTNum = 0;
  var planeTNum = 0;

  respPiont.forEach((obj) => {
    obj.Station.Type == 'train' ? trainSTNum++ : trainSTNum = trainSTNum;
    obj.Station.Type.text == 'bus' ? busTNum++ : busTNum = busTNum;
    obj.Station.Type == 'plane' ? planeTNum++ : planeTNum = planeTNum;
  })

  if (trainSTNum > 0) { retString = retString + '電車駅　' + trainSTNum.toString() + ' 件' }
  respPiont.forEach((obj, index) => {
    if (obj.Station.Type == 'train') {
      retString = retString + getstationRow(index, num, obj.Station.Name);
    }
  });
  retString = retString + ''

  if (busTNum > 0) { retString = retString + 'バス駅　' + busTNum.toString() + ' 件' }
  respPiont.forEach((obj, index) => {
    if (obj.Station.Type.text == 'bus') {
      retString = retString + getstationRow(index, num, obj.Station.Name);
    }
  });

  retString = retString + ''
  if (planeTNum > 0) { retString = retString + '空港　' + planeTNum.toString() + ' 件' }
  respPiont.forEach((obj, index) => {
    if (obj.Station.Type == 'plane') {
      retString = retString + getstationRow(index, num, obj.Station.Name);
    }
  });
  retString = retString + ''
  return retString;
}
// 駅名取得
function getstationRow(index, num, name) {
  var indexNum = 0;
  indexNum = (parseInt(index) + parseInt(num) * 100)
  return '' + name + '';

}
// クリア
function clearWord(num) {
  var div_stationList = document.getElementById('stationList:' + num);
  div_stationList.innerHTML = "";
  div_stationList.setAttribute('style', 'display:none')
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0