billy1125.github.io/lines.html at main · billy1125/billy1125.github.io · 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
<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <title>歷史運行圖 | 台灣鐵路/軌道運行圖</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="依日期瀏覽台灣鐵路各路線歷史運行圖，點選有底色的日期即可開啟對應的列車時間空間圖。" />
    <meta name="keywords" content="鐵路運行圖,歷史時刻表,台鐵,列車時間空間圖,台灣鐵路" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="呂卓勳 Cho-Hsun Lu" />
    <link rel="canonical" href="https://tradiagram.com/lines.html" />
    <meta property="og:title" content="歷史運行圖 | 台灣鐵路/軌道運行圖" />
    <meta property="og:description" content="依日期瀏覽台灣鐵路各路線歷史運行圖，點選有底色的日期即可開啟對應的列車時間空間圖。" />
    <meta property="og:image" content="https://tradiagram.com/images/og-cover.png" />
    <meta property="og:url" content="https://tradiagram.com/lines.html" />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="zh_TW" />
    <meta name="twitter:card" content="summary_large_image" />
    <link rel="Shortcut Icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="css/web.css">
</head>

<body style="padding-top: 56px;">

    <site-navbar></site-navbar>

    <div class="hero-section">
        <div class="container text-center">
            <h1 class="fw-bold mb-1" id="main_title">歷史運行圖</h1>
            <p class="text-muted mb-0">點選有底色的日期開啟對應的運行圖。</p>
        </div>
    </div>

    <div class="container py-3 pb-5">
        <div id="date-list">
            <div class="text-center text-muted py-5">
                <i class="fa-solid fa-spinner fa-spin me-2"></i>載入中…
            </div>
        </div>
        <section class="small text-muted mt-4">
            <p class="mb-2">本頁以日曆方式瀏覽台灣鐵路各路線的<strong>歷史運行圖</strong>。選定路線後，日曆上有底色的日期即代表該日有資料，點選即可開啟當日的列車時間空間圖。資料來源為政府資料開放平臺的台鐵時刻表，每週更新、約保留 60 天範圍。</p>
            <p class="mb-0">本站收錄路線：西部幹線北段（基隆–竹南）、山線（竹南–彰化，經苗栗）、海線（竹南–彰化，經大甲）、南段（彰化–高雄）、屏東線（高雄–枋寮）、南迴線（枋寮–台東）、台東線（花蓮–台東）、北迴線（蘇澳新–花蓮）、宜蘭線（八堵–蘇澳），以及平溪深澳線、內灣線、六家線、集集線、沙崙線等支線。第一次看運行圖可參考<a href="about-diagram.html">運行圖怎麼看</a>。</p>
        </section>
        <site-footer class="alert alert-warning d-block mt-4" role="alert"></site-footer>
    </div>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/config.js"></script>
<script type="module" src="js/components/site-navbar.js"></script>
<script type="module" src="js/components/site-footer.js"></script>

<script>
    const owner = 'billy1125';
    const repo = 'billy1125.github.io';
    const dataPath = 'data';
    const line_kind = new URLSearchParams(location.search).get('lineKind');
    const WEEKDAY_NAMES = ['日', '一', '二', '三', '四', '五', '六'];
    const _today = new Date();
    const TODAY_Y = _today.getFullYear();
    const TODAY_M = _today.getMonth() + 1;
    const TODAY_D = _today.getDate();

    async function getAvailableDates(owner, repo, dataPath) {
        const url = `https://api.github.com/repos/${owner}/${repo}/contents/${dataPath}`;
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`GitHub API error: ${response.status}`);
            const data = await response.json();
            return data
                .map(item => item.name)
                .filter(name => /^\d{8}\.json$/.test(name))
                .map(name => {
                    const s = name.slice(0, 8);
                    return `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}`;
                })
                .sort(); // ascending: oldest first
        } catch (error) {
            console.error('Error fetching GitHub files:', error);
            return [];
        }
    }

    function groupByMonth(dates) {
        const groups = new Map();
        for (const date of dates) {
            const key = date.slice(0, 7);
            if (!groups.has(key)) groups.set(key, new Set());
            groups.get(key).add(date.slice(8, 10)); // store DD only
        }
        return groups;
    }

    function buildMonthCalendar(monthKey, ddSet, line_kind) {
        const [y, m] = monthKey.split('-').map(Number);
        const firstDow = new Date(y, m - 1, 1).getDay();
        const daysInMonth = new Date(y, m, 0).getDate();

        const grid = document.createElement('div');
        grid.className = 'calendar-grid';

        // Weekday headers
        for (const name of WEEKDAY_NAMES) {
            const cell = document.createElement('div');
            cell.className = 'cal-weekday';
            cell.textContent = name;
            grid.appendChild(cell);
        }

        // Leading empty cells
        for (let i = 0; i < firstDow; i++) {
            grid.appendChild(document.createElement('div'));
        }

        // Day cells
        for (let d = 1; d <= daysInMonth; d++) {
            const dd = String(d).padStart(2, '0');
            const isToday = (y === TODAY_Y && m === TODAY_M && d === TODAY_D);
            const cell = document.createElement('div');
            cell.className = 'cal-day';

            if (ddSet.has(dd)) {
                const a = document.createElement('a');
                a.href = `diagram_output.html?formattedDate=${y}${String(m).padStart(2, '0')}${dd}&lineKind=${line_kind}&scrollToCurrentTime=false`;
                a.target = '_blank';
                a.className = 'cal-link' + (isToday ? ' is-today' : '');
                a.textContent = d;
                cell.appendChild(a);
            } else {
                const span = document.createElement('span');
                span.className = 'cal-no-data' + (isToday ? ' is-today' : '');
                span.textContent = d;
                cell.appendChild(span);
            }

            grid.appendChild(cell);
        }

        return grid;
    }

    function renderDates(groups, line_kind) {
        const container = document.getElementById('date-list');
        container.innerHTML = '';

        if (groups.size === 0) {
            container.innerHTML = '<p class="text-center text-muted py-4">目前無可用資料。</p>';
            return;
        }

        for (const monthKey of [...groups.keys()].sort()) {
            const [y, m] = monthKey.split('-').map(Number);

            const heading = document.createElement('div');
            heading.className = 'section-heading';
            heading.textContent = `${y}年${m}月`;
            container.appendChild(heading);

            container.appendChild(buildMonthCalendar(monthKey, groups.get(monthKey), line_kind));
        }
    }

    $(document).ready(async function () {
        const availableDates = await getAvailableDates(owner, repo, dataPath);
        const groups = groupByMonth(availableDates);
        renderDates(groups, line_kind);

        $("#main_title").text(dict_line[line_kind]);
        document.title = dict_line[line_kind] + ' 歷史運行圖 | tradiagram.com';

        const _canonicalUrl = `https://tradiagram.com/lines.html?lineKind=${line_kind}`;
        const _canonical = document.querySelector('link[rel="canonical"]');
        if (_canonical) _canonical.setAttribute('href', _canonicalUrl);
        const _ogUrl = document.querySelector('meta[property="og:url"]');
        if (_ogUrl) _ogUrl.setAttribute('content', _canonicalUrl);
        const _ogTitle = document.querySelector('meta[property="og:title"]');
        if (_ogTitle) _ogTitle.setAttribute('content', dict_line[line_kind] + ' 歷史運行圖 | 台灣鐵路/軌道運行圖');
    });
</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3628172690328777" crossorigin="anonymous"></script>

</html>