function MainComponent() { const [departureCity, setDepartureCity] = React.useState(""); const [destinationCity, setDestinationCity] = React.useState(""); const [ticketOptions, setTicketOptions] = React.useState([]); const airports = { 北海道: [ "札幌", "函館", "旭川" ], 東北: [ "青森", "秋田", "仙台" ], 関東: [ "東京", "成田", "羽田" ], 中部: [ "名古屋", "新潟", "富山" ], 関西: [ "大阪", "神戸", "関西" ], 中国: [ "広島", "岡山", "山口" ], 四国: [ "徳島", "高松", "松山" ], 九州: [ "福岡", "長崎", "熊本" ], 沖縄: [ "那覇", "宮古", "石垣" ] }; const destinationAirports = { 札幌: [ "東京", "大阪", "名古屋" ], 東京: [ "札幌", "大阪", "福岡" ], 大阪: [ "札幌", "東京", "沖縄" ], 福岡: [ "東京", "大阪", "沖縄" ] }; const handleSubmit = async (e)=>{ e.preventDefault(); setTicketOptions([]); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: `https://flights.example.com?from=${departureCity}&to=${destinationCity}&date=${new Date().toISOString().split('T')[0]}`, return_text: false }) }); const htmlText = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(htmlText, "text/html"); const ticketElements = doc.querySelectorAll(".ticket"); const tickets = Array.from(ticketElements).map((ticket)=>({ price: ticket.querySelector(".price").innerText, link: ticket.querySelector("a").href })); setTicketOptions(tickets); }; const handleDepartureChange = (e)=>{ setDepartureCity(e.target.value); setDestinationCity(""); }; const handleDestinationChange = (e)=>{ setDestinationCity(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F0F0] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "日本国内の旅客飛行機の航空券の最安値を知るアプリ"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap mb-6", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 mb-6 md:mb-0 px-3", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#333] text-xs font-bold mb-2", htmlFor: "grid-departure-city", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "出発地"), /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-[#fff] text-[#333] border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none", onChange: handleDepartureChange, value: departureCity, name: "departureCity", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "選択してください"), Object.entries(airports).map(([region, cities])=>/*#__PURE__*/ React.createElement("optgroup", { label: region, key: region, __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, cities.map((city)=>/*#__PURE__*/ React.createElement("option", { key: city, value: city, __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, city)))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 px-3", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-[#333] text-xs font-bold mb-2", htmlFor: "grid-destination-city", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "目的地"), /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-[#fff] text-[#333] border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none", id: "grid-destination-city", name: "destinationCity", value: destinationCity, onChange: handleDestinationChange, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "選択してください"), departureCity && destinationAirports[departureCity]?.map((city)=>/*#__PURE__*/ React.createElement("option", { key: city, value: city, __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, city))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-6", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "shadow bg-[#007AFF] hover:bg-[#0056b3] focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded", type: "submit", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "検索"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "検索結果:"), ticketOptions.length > 0 ? ticketOptions.map((option, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "価格: "), option.price, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: option.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "予約ページへ"))) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "利用可能な運賃が見つかりませんでした。"))); }