mirror of
https://github.com/tiennm99/exchange-rate-export.git
synced 2026-10-11 03:13:21 +00:00
feat: reinit nextjs
This commit is contained in:
tiennm99 committed
1 parent
8a8ccb5109
commit
5e2aa76e29
19 files changed
+6290
-14284
No files matched your search
+9
-11
@@ -3,8 +3,12 @@
|
|||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
/node_modules
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.js
|
.pnp.*
|
||||||
.yarn/install-state.gz
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
# testing
|
# testing
|
||||||
/coverage
|
/coverage
|
||||||
@@ -24,9 +28,10 @@
|
|||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
# local env files
|
# env files (can opt-in for committing if needed)
|
||||||
.env*.local
|
.env*
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
@@ -34,10 +39,3 @@ yarn-error.log*
|
|||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|
||||||
# OpenNext
|
|
||||||
/.open-next
|
|
||||||
|
|
||||||
# wrangler files
|
|
||||||
.wrangler
|
|
||||||
.dev.vars*
|
|
||||||
Vendored
-5
@@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"files.associations": {
|
|
||||||
"wrangler.json": "jsonc"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,201 +0,0 @@
|
|||||||
Apache License
|
|
||||||
Version 2.0, January 2004
|
|
||||||
http://www.apache.org/licenses/
|
|
||||||
|
|
||||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
||||||
|
|
||||||
1. Definitions.
|
|
||||||
|
|
||||||
"License" shall mean the terms and conditions for use, reproduction,
|
|
||||||
and distribution as defined by Sections 1 through 9 of this document.
|
|
||||||
|
|
||||||
"Licensor" shall mean the copyright owner or entity authorized by
|
|
||||||
the copyright owner that is granting the License.
|
|
||||||
|
|
||||||
"Legal Entity" shall mean the union of the acting entity and all
|
|
||||||
other entities that control, are controlled by, or are under common
|
|
||||||
control with that entity. For the purposes of this definition,
|
|
||||||
"control" means (i) the power, direct or indirect, to cause the
|
|
||||||
direction or management of such entity, whether by contract or
|
|
||||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
||||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
||||||
|
|
||||||
"You" (or "Your") shall mean an individual or Legal Entity
|
|
||||||
exercising permissions granted by this License.
|
|
||||||
|
|
||||||
"Source" form shall mean the preferred form for making modifications,
|
|
||||||
including but not limited to software source code, documentation
|
|
||||||
source, and configuration files.
|
|
||||||
|
|
||||||
"Object" form shall mean any form resulting from mechanical
|
|
||||||
transformation or translation of a Source form, including but
|
|
||||||
not limited to compiled object code, generated documentation,
|
|
||||||
and conversions to other media types.
|
|
||||||
|
|
||||||
"Work" shall mean the work of authorship, whether in Source or
|
|
||||||
Object form, made available under the License, as indicated by a
|
|
||||||
copyright notice that is included in or attached to the work
|
|
||||||
(an example is provided in the Appendix below).
|
|
||||||
|
|
||||||
"Derivative Works" shall mean any work, whether in Source or Object
|
|
||||||
form, that is based on (or derived from) the Work and for which the
|
|
||||||
editorial revisions, annotations, elaborations, or other modifications
|
|
||||||
represent, as a whole, an original work of authorship. For the purposes
|
|
||||||
of this License, Derivative Works shall not include works that remain
|
|
||||||
separable from, or merely link (or bind by name) to the interfaces of,
|
|
||||||
the Work and Derivative Works thereof.
|
|
||||||
|
|
||||||
"Contribution" shall mean any work of authorship, including
|
|
||||||
the original version of the Work and any modifications or additions
|
|
||||||
to that Work or Derivative Works thereof, that is intentionally
|
|
||||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
||||||
or by an individual or Legal Entity authorized to submit on behalf of
|
|
||||||
the copyright owner. For the purposes of this definition, "submitted"
|
|
||||||
means any form of electronic, verbal, or written communication sent
|
|
||||||
to the Licensor or its representatives, including but not limited to
|
|
||||||
communication on electronic mailing lists, source code control systems,
|
|
||||||
and issue tracking systems that are managed by, or on behalf of, the
|
|
||||||
Licensor for the purpose of discussing and improving the Work, but
|
|
||||||
excluding communication that is conspicuously marked or otherwise
|
|
||||||
designated in writing by the copyright owner as "Not a Contribution."
|
|
||||||
|
|
||||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
||||||
on behalf of whom a Contribution has been received by Licensor and
|
|
||||||
subsequently incorporated within the Work.
|
|
||||||
|
|
||||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
copyright license to reproduce, prepare Derivative Works of,
|
|
||||||
publicly display, publicly perform, sublicense, and distribute the
|
|
||||||
Work and such Derivative Works in Source or Object form.
|
|
||||||
|
|
||||||
3. Grant of Patent License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
(except as stated in this section) patent license to make, have made,
|
|
||||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
||||||
where such license applies only to those patent claims licensable
|
|
||||||
by such Contributor that are necessarily infringed by their
|
|
||||||
Contribution(s) alone or by combination of their Contribution(s)
|
|
||||||
with the Work to which such Contribution(s) was submitted. If You
|
|
||||||
institute patent litigation against any entity (including a
|
|
||||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
||||||
or a Contribution incorporated within the Work constitutes direct
|
|
||||||
or contributory patent infringement, then any patent licenses
|
|
||||||
granted to You under this License for that Work shall terminate
|
|
||||||
as of the date such litigation is filed.
|
|
||||||
|
|
||||||
4. Redistribution. You may reproduce and distribute copies of the
|
|
||||||
Work or Derivative Works thereof in any medium, with or without
|
|
||||||
modifications, and in Source or Object form, provided that You
|
|
||||||
meet the following conditions:
|
|
||||||
|
|
||||||
(a) You must give any other recipients of the Work or
|
|
||||||
Derivative Works a copy of this License; and
|
|
||||||
|
|
||||||
(b) You must cause any modified files to carry prominent notices
|
|
||||||
stating that You changed the files; and
|
|
||||||
|
|
||||||
(c) You must retain, in the Source form of any Derivative Works
|
|
||||||
that You distribute, all copyright, patent, trademark, and
|
|
||||||
attribution notices from the Source form of the Work,
|
|
||||||
excluding those notices that do not pertain to any part of
|
|
||||||
the Derivative Works; and
|
|
||||||
|
|
||||||
(d) If the Work includes a "NOTICE" text file as part of its
|
|
||||||
distribution, then any Derivative Works that You distribute must
|
|
||||||
include a readable copy of the attribution notices contained
|
|
||||||
within such NOTICE file, excluding those notices that do not
|
|
||||||
pertain to any part of the Derivative Works, in at least one
|
|
||||||
of the following places: within a NOTICE text file distributed
|
|
||||||
as part of the Derivative Works; within the Source form or
|
|
||||||
documentation, if provided along with the Derivative Works; or,
|
|
||||||
within a display generated by the Derivative Works, if and
|
|
||||||
wherever such third-party notices normally appear. The contents
|
|
||||||
of the NOTICE file are for informational purposes only and
|
|
||||||
do not modify the License. You may add Your own attribution
|
|
||||||
notices within Derivative Works that You distribute, alongside
|
|
||||||
or as an addendum to the NOTICE text from the Work, provided
|
|
||||||
that such additional attribution notices cannot be construed
|
|
||||||
as modifying the License.
|
|
||||||
|
|
||||||
You may add Your own copyright statement to Your modifications and
|
|
||||||
may provide additional or different license terms and conditions
|
|
||||||
for use, reproduction, or distribution of Your modifications, or
|
|
||||||
for any such Derivative Works as a whole, provided Your use,
|
|
||||||
reproduction, and distribution of the Work otherwise complies with
|
|
||||||
the conditions stated in this License.
|
|
||||||
|
|
||||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
||||||
any Contribution intentionally submitted for inclusion in the Work
|
|
||||||
by You to the Licensor shall be under the terms and conditions of
|
|
||||||
this License, without any additional terms or conditions.
|
|
||||||
Notwithstanding the above, nothing herein shall supersede or modify
|
|
||||||
the terms of any separate license agreement you may have executed
|
|
||||||
with Licensor regarding such Contributions.
|
|
||||||
|
|
||||||
6. Trademarks. This License does not grant permission to use the trade
|
|
||||||
names, trademarks, service marks, or product names of the Licensor,
|
|
||||||
except as required for reasonable and customary use in describing the
|
|
||||||
origin of the Work and reproducing the content of the NOTICE file.
|
|
||||||
|
|
||||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
||||||
agreed to in writing, Licensor provides the Work (and each
|
|
||||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
||||||
implied, including, without limitation, any warranties or conditions
|
|
||||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
||||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
||||||
appropriateness of using or redistributing the Work and assume any
|
|
||||||
risks associated with Your exercise of permissions under this License.
|
|
||||||
|
|
||||||
8. Limitation of Liability. In no event and under no legal theory,
|
|
||||||
whether in tort (including negligence), contract, or otherwise,
|
|
||||||
unless required by applicable law (such as deliberate and grossly
|
|
||||||
negligent acts) or agreed to in writing, shall any Contributor be
|
|
||||||
liable to You for damages, including any direct, indirect, special,
|
|
||||||
incidental, or consequential damages of any character arising as a
|
|
||||||
result of this License or out of the use or inability to use the
|
|
||||||
Work (including but not limited to damages for loss of goodwill,
|
|
||||||
work stoppage, computer failure or malfunction, or any and all
|
|
||||||
other commercial damages or losses), even if such Contributor
|
|
||||||
has been advised of the possibility of such damages.
|
|
||||||
|
|
||||||
9. Accepting Warranty or Additional Liability. While redistributing
|
|
||||||
the Work or Derivative Works thereof, You may choose to offer,
|
|
||||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
||||||
or other liability obligations and/or rights consistent with this
|
|
||||||
License. However, in accepting such obligations, You may act only
|
|
||||||
on Your own behalf and on Your sole responsibility, not on behalf
|
|
||||||
of any other Contributor, and only if You agree to indemnify,
|
|
||||||
defend, and hold each Contributor harmless for any liability
|
|
||||||
incurred by, or claims asserted against, such Contributor by reason
|
|
||||||
of your accepting any such warranty or additional liability.
|
|
||||||
|
|
||||||
END OF TERMS AND CONDITIONS
|
|
||||||
|
|
||||||
APPENDIX: How to apply the Apache License to your work.
|
|
||||||
|
|
||||||
To apply the Apache License to your work, attach the following
|
|
||||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
||||||
replaced with your own identifying information. (Don't include
|
|
||||||
the brackets!) The text should be enclosed in the appropriate
|
|
||||||
comment syntax for the file format. We also recommend that a
|
|
||||||
file or class name and description of purpose be included on the
|
|
||||||
same "printed page" as the copyright notice for easier
|
|
||||||
identification within third-party archives.
|
|
||||||
|
|
||||||
Copyright [yyyy] [name of copyright owner]
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
@@ -1,16 +1,4 @@
|
|||||||
# exchange-rate-export
|
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||||
Fetch data from BIDV or Techcombank and export to Excel format.
|
|
||||||
|
|
||||||
Features:
|
|
||||||
- Choose BIDV or Techcombank.
|
|
||||||
- Select time range.
|
|
||||||
- View and export to Excel.
|
|
||||||
|
|
||||||
Use data from :
|
|
||||||
- https://bidv.com.vn/vn/ty-gia-ngoai-te
|
|
||||||
- https://techcombank.com/cong-cu-tien-ich/ty-gia
|
|
||||||
|
|
||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import { dirname } from "path";
|
||||||
|
import { fileURLToPath } from "url";
|
||||||
|
import { FlatCompat } from "@eslint/eslintrc";
|
||||||
|
|
||||||
|
const __filename = fileURLToPath(import.meta.url);
|
||||||
|
const __dirname = dirname(__filename);
|
||||||
|
|
||||||
|
const compat = new FlatCompat({
|
||||||
|
baseDirectory: __dirname,
|
||||||
|
});
|
||||||
|
|
||||||
|
const eslintConfig = [...compat.extends("next/core-web-vitals")];
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
-11
@@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="vi">
|
|
||||||
<head>
|
|
||||||
<title>Redirect</title>
|
|
||||||
<script>
|
|
||||||
window.location.hostname = "miti99.com";
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -2,7 +2,3 @@
|
|||||||
const nextConfig = {};
|
const nextConfig = {};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|
||||||
// added by create cloudflare to enable calling `getCloudflareContext()` in `next dev`
|
|
||||||
import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
|
|
||||||
initOpenNextCloudflareForDev();
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
|
|
||||||
|
|
||||||
export default defineCloudflareConfig({
|
|
||||||
// Uncomment to enable R2 cache,
|
|
||||||
// It should be imported as:
|
|
||||||
// `import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";`
|
|
||||||
// See https://opennext.js.org/cloudflare/caching for more details
|
|
||||||
// incrementalCache: r2IncrementalCache,
|
|
||||||
});
|
|
||||||
Generated
+6130
-13301
File diff suppressed because it is too large.
Load diff
+21
-22
@@ -1,24 +1,23 @@
|
|||||||
{
|
{
|
||||||
"name": "exchange-rate-export",
|
"name": "exchange-rate-export",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev --turbopack",
|
"dev": "next dev --turbopack",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"lint": "next lint"
|
||||||
"deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
|
},
|
||||||
"preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
|
"dependencies": {
|
||||||
"cf-typegen": "wrangler types --env-interface CloudflareEnv ./cloudflare-env.d.ts"
|
"react": "^19.0.0",
|
||||||
},
|
"react-dom": "^19.0.0",
|
||||||
"dependencies": {
|
"next": "15.3.4"
|
||||||
"@opennextjs/cloudflare": "^1.3.1",
|
},
|
||||||
"bootstrap": "^5.3.7",
|
"devDependencies": {
|
||||||
"next": "15.3.4",
|
"@tailwindcss/postcss": "^4",
|
||||||
"react": "^19.0.0",
|
"tailwindcss": "^4",
|
||||||
"react-dom": "^19.0.0"
|
"eslint": "^9",
|
||||||
},
|
"eslint-config-next": "15.3.4",
|
||||||
"devDependencies": {
|
"@eslint/eslintrc": "^3"
|
||||||
"wrangler": "^4.22.0"
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: ["@tailwindcss/postcss"],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
# https://developers.cloudflare.com/workers/static-assets/headers
|
|
||||||
/_next/static/*
|
|
||||||
Cache-Control: public,max-age=31536000,immutable
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function BidvPage() {
|
|
||||||
const [startDate, setStartDate] = useState("");
|
|
||||||
const [endDate, setEndDate] = useState("");
|
|
||||||
const [status, setStatus] = useState("");
|
|
||||||
const [results, setResults] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
function formatDate(date) {
|
|
||||||
const d = new Date(date);
|
|
||||||
const day = String(d.getDate()).padStart(2, "0");
|
|
||||||
const month = String(d.getMonth() + 1).padStart(2, "0");
|
|
||||||
const year = d.getFullYear();
|
|
||||||
return `${day}/${month}/${year}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDateRange(start, end) {
|
|
||||||
const dates = [];
|
|
||||||
let current = new Date(start);
|
|
||||||
const last = new Date(end);
|
|
||||||
while (current <= last) {
|
|
||||||
dates.push(new Date(current));
|
|
||||||
current.setDate(current.getDate() + 1);
|
|
||||||
}
|
|
||||||
return dates;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchNamerecord(dateStr) {
|
|
||||||
const url = "https://bidv.com.vn/ServicesBIDV/ExchangeDetailSearchTimeServlet";
|
|
||||||
const payload = `date=${encodeURIComponent(dateStr)}`;
|
|
||||||
try {
|
|
||||||
const res = await fetch(url, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/x-www-form-urlencoded",
|
|
||||||
},
|
|
||||||
body: payload,
|
|
||||||
});
|
|
||||||
if (!res.ok) throw new Error("API 1 error");
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status !== 1 || !data.data || !data.data.length) return null;
|
|
||||||
let latest = data.data[0];
|
|
||||||
for (const rec of data.data) {
|
|
||||||
if (rec.time > latest.time) latest = rec;
|
|
||||||
}
|
|
||||||
return latest.namerecord;
|
|
||||||
} catch (e) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchUSD(dateStr, namerecord) {
|
|
||||||
const url = "https://bidv.com.vn/ServicesBIDV/ExchangeDetailServlet";
|
|
||||||
const payload = `date=${encodeURIComponent(dateStr)}&time=${namerecord}`;
|
|
||||||
try {
|
|
||||||
const res = await fetch(url, {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/x-www-form-urlencoded",
|
|
||||||
},
|
|
||||||
body: payload,
|
|
||||||
});
|
|
||||||
if (!res.ok) throw new Error("API 2 error");
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status !== 1 || !data.data) return null;
|
|
||||||
const usd = data.data.find((item) => item.currency === "USD");
|
|
||||||
if (!usd) return null;
|
|
||||||
return {
|
|
||||||
nameVI: usd.nameVI,
|
|
||||||
muaTm: usd.muaTm,
|
|
||||||
muaCk: usd.muaCk,
|
|
||||||
currency: usd.currency,
|
|
||||||
nameEN: usd.nameEN,
|
|
||||||
ban: usd.ban,
|
|
||||||
};
|
|
||||||
} catch (e) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTable(data) {
|
|
||||||
return (
|
|
||||||
<table style={{ width: "100%", borderCollapse: "collapse", marginTop: 24, display: data.length ? "" : "none" }}>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>nameVI</th>
|
|
||||||
<th>muaTm</th>
|
|
||||||
<th>muaCk</th>
|
|
||||||
<th>currency</th>
|
|
||||||
<th>nameEN</th>
|
|
||||||
<th>ban</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{data.map((row, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
<td>{row.date}</td>
|
|
||||||
<td>{row.nameVI}</td>
|
|
||||||
<td>{row.muaTm}</td>
|
|
||||||
<td>{row.muaCk}</td>
|
|
||||||
<td>{row.currency}</td>
|
|
||||||
<td>{row.nameEN}</td>
|
|
||||||
<td>{row.ban}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function exportCSV(data) {
|
|
||||||
const header = ["Date", "nameVI", "muaTm", "muaCk", "currency", "nameEN", "ban"];
|
|
||||||
const rows = [header];
|
|
||||||
for (const row of data) {
|
|
||||||
rows.push([
|
|
||||||
row.date,
|
|
||||||
row.nameVI,
|
|
||||||
row.muaTm,
|
|
||||||
row.muaCk,
|
|
||||||
row.currency,
|
|
||||||
row.nameEN,
|
|
||||||
row.ban,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
const csvContent = rows
|
|
||||||
.map((r) => r.map((cell) => '"' + String(cell).replace(/"/g, '""') + '"').join(","))
|
|
||||||
.join("\r\n");
|
|
||||||
const blob = new Blob([csvContent], { type: "text/csv" });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = url;
|
|
||||||
a.download = "usd_exchange_rates.csv";
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleFetch() {
|
|
||||||
if (!startDate || !endDate) {
|
|
||||||
setStatus("<div class='error'>Please select both start and end dates.</div>");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (startDate > endDate) {
|
|
||||||
setStatus("<div class='error'>Start date must be before or equal to end date.</div>");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setStatus("<div class='loading'>Fetching data, please wait...</div>");
|
|
||||||
setLoading(true);
|
|
||||||
setResults([]);
|
|
||||||
const dates = getDateRange(startDate, endDate);
|
|
||||||
const newResults = [];
|
|
||||||
for (let i = 0; i < dates.length; i++) {
|
|
||||||
const dateObj = dates[i];
|
|
||||||
const dateStr = formatDate(dateObj);
|
|
||||||
setStatus(`<div class='loading'>Fetching: ${dateStr} (${i + 1}/${dates.length})</div>`);
|
|
||||||
const namerecord = await fetchNamerecord(dateStr);
|
|
||||||
if (!namerecord) continue;
|
|
||||||
const usd = await fetchUSD(dateStr, namerecord);
|
|
||||||
if (usd) {
|
|
||||||
newResults.push({ date: dateStr, ...usd });
|
|
||||||
setResults([...newResults]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setStatus(newResults.length ? "" : "<div class='error'>No data found for the selected range.</div>");
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container">
|
|
||||||
<h1>Exchange Rate Export (USD)</h1>
|
|
||||||
<div style={{ marginBottom: 20 }}>
|
|
||||||
<label htmlFor="start-date">Start Date:</label>
|
|
||||||
<input type="date" id="start-date" value={startDate} onChange={e => setStartDate(e.target.value)} />
|
|
||||||
<label htmlFor="end-date">End Date:</label>
|
|
||||||
<input type="date" id="end-date" value={endDate} onChange={e => setEndDate(e.target.value)} />
|
|
||||||
<button onClick={handleFetch} disabled={loading}>Fetch</button>
|
|
||||||
<button onClick={() => exportCSV(results)} disabled={!results.length}>Export CSV</button>
|
|
||||||
</div>
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: status }} />
|
|
||||||
{renderTable(results)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+10
-95
@@ -1,8 +1,17 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--foreground: #171717;
|
--foreground: #171717;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--background: #0a0a0a;
|
--background: #0a0a0a;
|
||||||
@@ -10,102 +19,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
body {
|
||||||
max-width: 100vw;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: var(--foreground);
|
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
margin: 40px;
|
|
||||||
background: #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
background: #fff;
|
|
||||||
padding: 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
|
|
||||||
max-width: 700px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="date"] {
|
|
||||||
margin-right: 16px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
padding: 8px 16px;
|
|
||||||
margin-right: 8px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #007bff;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:disabled {
|
|
||||||
background: #aaa;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 8px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background: #007bff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error {
|
|
||||||
color: red;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
+3
-2
@@ -1,6 +1,5 @@
|
|||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
@@ -20,7 +19,9 @@ export const metadata = {
|
|||||||
export default function RootLayout({ children }) {
|
export default function RootLayout({ children }) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
<body
|
||||||
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+97
-34
@@ -1,40 +1,103 @@
|
|||||||
"use client";
|
import Image from "next/image";
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const router = useRouter();
|
|
||||||
const [bank, setBank] = useState("bidv");
|
|
||||||
const [startDate, setStartDate] = useState("");
|
|
||||||
const [endDate, setEndDate] = useState("");
|
|
||||||
|
|
||||||
function handleBankChange(e) {
|
|
||||||
setBank(e.target.value);
|
|
||||||
if (e.target.value === "bidv") {
|
|
||||||
router.push("/bidv");
|
|
||||||
} else if (e.target.value === "tcb") {
|
|
||||||
router.push("/tcb");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container">
|
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||||
<h1>Exchange Rate Export (USD)</h1>
|
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||||
<div style={{ marginBottom: 20 }}>
|
<Image
|
||||||
<label htmlFor="start-date">Start Date:</label>
|
className="dark:invert"
|
||||||
<input type="date" id="start-date" value={startDate} onChange={e => setStartDate(e.target.value)} />
|
src="/next.svg"
|
||||||
<label htmlFor="end-date">End Date:</label>
|
alt="Next.js logo"
|
||||||
<input type="date" id="end-date" value={endDate} onChange={e => setEndDate(e.target.value)} />
|
width={180}
|
||||||
<button onClick={() => router.push(`/${bank}`)} disabled={!startDate || !endDate}>Go</button>
|
height={38}
|
||||||
<label htmlFor="bank-select">Bank:</label>
|
priority
|
||||||
<select id="bank-select" value={bank} onChange={handleBankChange}>
|
/>
|
||||||
<option value="bidv">BIDV</option>
|
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||||
<option value="tcb">Techcombank</option>
|
<li className="mb-2 tracking-[-.01em]">
|
||||||
</select>
|
Get started by editing{" "}
|
||||||
</div>
|
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
|
||||||
<div style={{ color: '#888', textAlign: 'center', marginTop: 40 }}>
|
src/app/page.js
|
||||||
Select a bank and date range, then click Go to view and export exchange rates.
|
</code>
|
||||||
</div>
|
.
|
||||||
|
</li>
|
||||||
|
<li className="tracking-[-.01em]">
|
||||||
|
Save and see your changes instantly.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||||
|
<a
|
||||||
|
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||||
|
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
className="dark:invert"
|
||||||
|
src="/vercel.svg"
|
||||||
|
alt="Vercel logomark"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
/>
|
||||||
|
Deploy now
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||||
|
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Read our docs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||||
|
<a
|
||||||
|
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||||
|
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
aria-hidden
|
||||||
|
src="/file.svg"
|
||||||
|
alt="File icon"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
Learn
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||||
|
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
aria-hidden
|
||||||
|
src="/window.svg"
|
||||||
|
alt="Window icon"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
Examples
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||||
|
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
aria-hidden
|
||||||
|
src="/globe.svg"
|
||||||
|
alt="Globe icon"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
Go to nextjs.org →
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,168 +0,0 @@
|
|||||||
.page {
|
|
||||||
--gray-rgb: 0, 0, 0;
|
|
||||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
|
|
||||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
|
|
||||||
|
|
||||||
--button-primary-hover: #383838;
|
|
||||||
--button-secondary-hover: #f2f2f2;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 20px 1fr 20px;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
min-height: 100svh;
|
|
||||||
padding: 80px;
|
|
||||||
gap: 64px;
|
|
||||||
font-family: var(--font-geist-sans);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.page {
|
|
||||||
--gray-rgb: 255, 255, 255;
|
|
||||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
|
|
||||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
|
|
||||||
|
|
||||||
--button-primary-hover: #ccc;
|
|
||||||
--button-secondary-hover: #1a1a1a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 32px;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main ol {
|
|
||||||
font-family: var(--font-geist-mono);
|
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
letter-spacing: -0.01em;
|
|
||||||
list-style-position: inside;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main li:not(:last-of-type) {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main code {
|
|
||||||
font-family: inherit;
|
|
||||||
background: var(--gray-alpha-100);
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas a {
|
|
||||||
appearance: none;
|
|
||||||
border-radius: 128px;
|
|
||||||
height: 48px;
|
|
||||||
padding: 0 20px;
|
|
||||||
border: none;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition:
|
|
||||||
background 0.2s,
|
|
||||||
color 0.2s,
|
|
||||||
border-color 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.primary {
|
|
||||||
background: var(--foreground);
|
|
||||||
color: var(--background);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.secondary {
|
|
||||||
border-color: var(--gray-alpha-200);
|
|
||||||
min-width: 158px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
grid-row-start: 3;
|
|
||||||
display: flex;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer img {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enable hover only on non-touch devices */
|
|
||||||
@media (hover: hover) and (pointer: fine) {
|
|
||||||
a.primary:hover {
|
|
||||||
background: var(--button-primary-hover);
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.secondary:hover {
|
|
||||||
background: var(--button-secondary-hover);
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.page {
|
|
||||||
padding: 32px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main ol {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctas a {
|
|
||||||
font-size: 14px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.secondary {
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.logo {
|
|
||||||
filter: invert();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function TcbPage() {
|
|
||||||
const [startDate, setStartDate] = useState("");
|
|
||||||
const [endDate, setEndDate] = useState("");
|
|
||||||
const [status, setStatus] = useState("");
|
|
||||||
const [results, setResults] = useState([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
function formatDate(date) {
|
|
||||||
const d = new Date(date);
|
|
||||||
const day = String(d.getDate()).padStart(2, "0");
|
|
||||||
const month = String(d.getMonth() + 1).padStart(2, "0");
|
|
||||||
const year = d.getFullYear();
|
|
||||||
return `${day}/${month}/${year}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDateRange(start, end) {
|
|
||||||
const dates = [];
|
|
||||||
let current = new Date(start);
|
|
||||||
const last = new Date(end);
|
|
||||||
while (current <= last) {
|
|
||||||
dates.push(new Date(current));
|
|
||||||
current.setDate(current.getDate() + 1);
|
|
||||||
}
|
|
||||||
return dates;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchUSD(dateObj) {
|
|
||||||
const yyyy = dateObj.getFullYear();
|
|
||||||
const mm = String(dateObj.getMonth() + 1).padStart(2, "0");
|
|
||||||
const dd = String(dateObj.getDate()).padStart(2, "0");
|
|
||||||
const dateStr = `${yyyy}-${mm}-${dd}`;
|
|
||||||
const url = `https://techcombank.com/content/techcombank/web/vn/vi/cong-cu-tien-ich/ty-gia/_jcr_content.exchange-rates.${dateStr}.integration.json`;
|
|
||||||
try {
|
|
||||||
const res = await fetch(url);
|
|
||||||
if (!res.ok) throw new Error("API error");
|
|
||||||
const data = await res.json();
|
|
||||||
if (!data.exchangeRate || !data.exchangeRate.data) return null;
|
|
||||||
const usd = data.exchangeRate.data.find((item) => item.label === "USD (50,100)");
|
|
||||||
if (!usd) return null;
|
|
||||||
return {
|
|
||||||
date: formatDate(dateObj),
|
|
||||||
label: usd.label,
|
|
||||||
askRate: usd.askRate,
|
|
||||||
bidRateCK: usd.bidRateCK,
|
|
||||||
bidRateTM: usd.bidRateTM,
|
|
||||||
askRateTM: usd.askRateTM,
|
|
||||||
sourceCurrency: usd.sourceCurrency,
|
|
||||||
targetCurrency: usd.targetCurrency,
|
|
||||||
};
|
|
||||||
} catch (e) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTable(data) {
|
|
||||||
return (
|
|
||||||
<table style={{ width: "100%", borderCollapse: "collapse", marginTop: 24, display: data.length ? "" : "none" }}>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Date</th>
|
|
||||||
<th>label</th>
|
|
||||||
<th>askRate</th>
|
|
||||||
<th>bidRateCK</th>
|
|
||||||
<th>bidRateTM</th>
|
|
||||||
<th>askRateTM</th>
|
|
||||||
<th>sourceCurrency</th>
|
|
||||||
<th>targetCurrency</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{data.map((row, i) => (
|
|
||||||
<tr key={i}>
|
|
||||||
<td>{row.date}</td>
|
|
||||||
<td>{row.label}</td>
|
|
||||||
<td>{row.askRate || ""}</td>
|
|
||||||
<td>{row.bidRateCK || ""}</td>
|
|
||||||
<td>{row.bidRateTM || ""}</td>
|
|
||||||
<td>{row.askRateTM || ""}</td>
|
|
||||||
<td>{row.sourceCurrency}</td>
|
|
||||||
<td>{row.targetCurrency}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function exportCSV(data) {
|
|
||||||
const header = ["Date", "label", "askRate", "bidRateCK", "bidRateTM", "askRateTM", "sourceCurrency", "targetCurrency"];
|
|
||||||
const rows = [header];
|
|
||||||
for (const row of data) {
|
|
||||||
rows.push([
|
|
||||||
row.date,
|
|
||||||
row.label,
|
|
||||||
row.askRate,
|
|
||||||
row.bidRateCK,
|
|
||||||
row.bidRateTM,
|
|
||||||
row.askRateTM,
|
|
||||||
row.sourceCurrency,
|
|
||||||
row.targetCurrency,
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
const csvContent = rows
|
|
||||||
.map((r) => r.map((cell) => '"' + String(cell || "").replace(/"/g, '""') + '"').join(","))
|
|
||||||
.join("\r\n");
|
|
||||||
const blob = new Blob([csvContent], { type: "text/csv" });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.href = url;
|
|
||||||
a.download = "usd_exchange_rates_tcb.csv";
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleFetch() {
|
|
||||||
if (!startDate || !endDate) {
|
|
||||||
setStatus("<div class='error'>Please select both start and end dates.</div>");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (startDate > endDate) {
|
|
||||||
setStatus("<div class='error'>Start date must be before or equal to end date.</div>");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setStatus("<div class='loading'>Fetching data, please wait...</div>");
|
|
||||||
setLoading(true);
|
|
||||||
setResults([]);
|
|
||||||
const dates = getDateRange(startDate, endDate);
|
|
||||||
const newResults = [];
|
|
||||||
for (let i = 0; i < dates.length; i++) {
|
|
||||||
const dateObj = dates[i];
|
|
||||||
const dateStr = formatDate(dateObj);
|
|
||||||
setStatus(`<div class='loading'>Fetching: ${dateStr} (${i + 1}/${dates.length})</div>`);
|
|
||||||
const usd = await fetchUSD(dateObj);
|
|
||||||
if (usd) {
|
|
||||||
newResults.push(usd);
|
|
||||||
setResults([...newResults]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
setStatus(newResults.length ? "" : "<div class='error'>No data found for the selected range.</div>");
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="container">
|
|
||||||
<h1>Exchange Rate Export (USD, Techcombank)</h1>
|
|
||||||
<div style={{ marginBottom: 20 }}>
|
|
||||||
<label htmlFor="start-date">Start Date:</label>
|
|
||||||
<input type="date" id="start-date" value={startDate} onChange={e => setStartDate(e.target.value)} />
|
|
||||||
<label htmlFor="end-date">End Date:</label>
|
|
||||||
<input type="date" id="end-date" value={endDate} onChange={e => setEndDate(e.target.value)} />
|
|
||||||
<button onClick={handleFetch} disabled={loading}>Fetch</button>
|
|
||||||
<button onClick={() => exportCSV(results)} disabled={!results.length}>Export CSV</button>
|
|
||||||
</div>
|
|
||||||
<div dangerouslySetInnerHTML={{ __html: status }} />
|
|
||||||
{renderTable(results)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
/**
|
|
||||||
* For more details on how to configure Wrangler, refer to:
|
|
||||||
* https://developers.cloudflare.com/workers/wrangler/configuration/
|
|
||||||
*/
|
|
||||||
{
|
|
||||||
"$schema": "node_modules/wrangler/config-schema.json",
|
|
||||||
"name": "exchange-rate-export",
|
|
||||||
"main": ".open-next/worker.js",
|
|
||||||
"compatibility_date": "2025-03-01",
|
|
||||||
"compatibility_flags": [
|
|
||||||
"nodejs_compat",
|
|
||||||
"global_fetch_strictly_public"
|
|
||||||
],
|
|
||||||
"assets": {
|
|
||||||
"binding": "ASSETS",
|
|
||||||
"directory": ".open-next/assets"
|
|
||||||
},
|
|
||||||
"observability": {
|
|
||||||
"enabled": true
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Smart Placement
|
|
||||||
* Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
|
|
||||||
*/
|
|
||||||
// "placement": { "mode": "smart" },
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Bindings
|
|
||||||
* Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
|
|
||||||
* databases, object storage, AI inference, real-time communication and more.
|
|
||||||
* https://developers.cloudflare.com/workers/runtime-apis/bindings/
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Environment Variables
|
|
||||||
* https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
|
|
||||||
*/
|
|
||||||
// "vars": { "MY_VARIABLE": "production_value" },
|
|
||||||
/**
|
|
||||||
* Note: Use secrets to store sensitive data.
|
|
||||||
* https://developers.cloudflare.com/workers/configuration/secrets/
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Static Assets
|
|
||||||
* https://developers.cloudflare.com/workers/static-assets/binding/
|
|
||||||
*/
|
|
||||||
// "assets": { "directory": "./public/", "binding": "ASSETS" },
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Service Bindings (communicate between multiple Workers)
|
|
||||||
* https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
|
|
||||||
*/
|
|
||||||
// "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
|
|
||||||
}
|
|
||||||
Reference in new issue
Block a user