database_final/search_tracks.html at main · SaviorDT/database_final · 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
<!DOCTYPE html>
<html>
<head>
	<title>search</title>
    <script src="common.js"></script>
    <script src="search_function.js"></script>
    <script src="savior_dt_js_lib/suggest_input.js"></script>
    <script src="savior_dt_js_lib/para_parser.js"></script>
    <script src="savior_dt_js_lib/database_connector.js"></script>
	<meta charset="utf-8">
</head>

<body>
    <style>
        table ,th ,td{
            border: solid 1px;
        }
    </style>
    <input type="button" name="index" value="回首頁" style="font-size: 20px" onclick="jump()"></input>
    <div id="search_holder">
        <form>
            <!--action_type = select-->
            <label for="table">想找些什麼：</label>
            <select id="table">
                <option value="albums">專輯</option>
                <option value="tracks" selected>單曲</option>
                <option value="artists">作者</option>
            </select><br>

            <l>搜尋條件：（不填就是不指定）</l><br><!--action_columns-->
            <label for="name">單曲名稱：</label><input type="text" name="name" id="name" list="name_data_list"></input><datalist id="name_data_list"></datalist><br><!--tracks_name-->
            <label for="disc_number_min">專輯中唱片編號（0~127）：</label><input type="number", name="disc_number_min" id="disc_number_min" min="1" max="127"></input>
            <label for="disc_number_max">~ </label><input type="number", name="disc_number_max" id="disc_number_max" min="1" max="127"></input><br>
            <label for="track_number_min">專輯中單曲編號（0~32767）：</label><input type="number", name="track_number_min" id="track_number_min" min="1" max="32767"></input>
            <label for="track_number_max">~ </label><input type="number", name="track_number_max" id="track_number_max" min="1" max="32767"></input><br>
            <label for="tracks_duration_min">單曲長度（毫秒）：</label><input type="number", name="tracks_duration_min" id="tracks_duration_min" min="0" max="1e23-1"></input>
            <label for="tracks_duration_max">~ </label><input type="number", name="tracks_duration_max" id="tracks_duration_max" min="0" max="1e23-1"></input><br>
            <label for="explicit_lyrics">是否有露骨、暴力歌詞：</label>
                <input type="radio" id="no_check_explicit" name="explicit_lyrics" value="-1" required="required" checked/><label for="no_check_explicit">不指定</label>
                <input type="radio" id="explicit" name="explicit_lyrics" value="1" required="required"/><label for="explicit">是</label>
		        <input type="radio" id="no_explicit" name="explicit_lyrics" value="0" required="required"/><label for="no_explicit">否</label><br>
            <label for="tracks_popularity_min">人氣指數（0~100）：</label><input type="number", name="tracks_popularity_min" id="tracks_popularity_min" min="0" max="100"></input>
            <label for="tracks_popularity_max">~：</label><input type="number", name="tracks_popularity_max" id="tracks_popularity_max" min="0" max="100"></input><br>
            <label for="is_playable">是否還能播放：</label>
                <input type="radio" id="no_check_playable" name="is_playable" value="-1" required="required" checked/><label for="is_playable">不指定</label>
                <input type="radio" id="playable" name="is_playable" value="1" required="required"/><label for="is_playable">是</label>
		        <input type="radio" id="not_playable" name="is_playable" value="0" required="required"/><label for="is_playable">否</label><br>

            <label>排序方式：</label>
            <select id="order">
                <option value="0">無</option>
                <option value="tracks_name">名稱</option>
                <option value="disc_number">唱片編號</option>
                <option value="track_number">單曲編號</option>
                <option value="tracks_duration">長度</option>
                <option value="explicit">是否露骨</option>
                <option value="tracks_popularity">人氣</option>
                <option value="is_playable">還能播放</option>
                <!--<option value="disc_number">專輯唱片數</option>-->
            </select><br>
            <input type="radio" id="order_D" name="order_direction" value="1" required="required" checked/><label for="order_D">由小到大</label>
		    <input type="radio" id="order_A" name="order_direction" value="0" required="required"/><label for="order_A">由大到小</label><br>
            <label for="page" >頁面</label><input id="page" name="page" type="number" value="0" min="0" style="width: 50px"></input>
            <label for="limit">每頁</label><input type="number" id="limit" name="limit" value="20" min="0" style="width: 50px"></input><label>筆</label><br>
            <input id="trigger" type="button" name="search" value="查詢"></input>
        </form>
    </div><br>

    <div id="tbl_holder">
        查詢結果會在這顯示...
        <table id="albums">
        </table>
    </div>

    <script>
        autoChangeTable(document.getElementById('table'));
        autoUpdateSuggest(document.getElementById('name'), document.getElementById('name_data_list'), 'tracks', 'tracks_name');

        document.getElementById("trigger").addEventListener("click", function(event){
            let form = new FormData();
            let columns = [];
            let values = [];

            let search_table = document.getElementById("table").value;
            form.append("action_type", "select");
            form.append("table", search_table);


            stringInputToPost(document.getElementById("name"), 'tracks_name', columns, values);
            rangeInputToPost(document.getElementById("disc_number_min"), document.getElementById("disc_number_max"), 'disc_number', columns, values);
            rangeInputToPost(document.getElementById("track_number_min"), document.getElementById("track_number_max"), 'track_number', columns, values);
            rangeInputToPost(document.getElementById("tracks_duration_min"), document.getElementById("tracks_duration_max"), 'tracks_duration', columns, values);
            optionInputToPost(document.querySelector('input[name="explicit_lyrics"]:checked'), 'explicit', columns, values);
            rangeInputToPost(document.getElementById("tracks_popularity_min"), document.getElementById("tracks_popularity_max"), 'tracks_popularity', columns, values);
            optionInputToPost(document.querySelector('input[name="is_playable"]:checked'), 'is_playable', columns, values);

            if(columns.length > 0) {
                form.append('action_columns', JSON.stringify(columns));
                form.append('values', JSON.stringify(values));
            }

            if(document.getElementById("order").value != "0"){
                form.append("order", document.getElementById("order").value);
                form.append("order_direction", document.querySelector('form')['order_direction'].value);
            }
            form.append("page", Math.max(document.getElementById("page").value, 0));
            form.append("limit", Math.max(document.getElementById("limit").value, 1));

            //var test_txt = {"stat":1, "description":["id","albums_name", "artists_name", "release_date"], "rows":[["000","A", "art", "2023-11-21"],["001","B", "brt", "2023-11-20"]]};
            //make_table(test_txt);
            //check_form(form);

            fetch("db_action.php", {
                method: "POST",
                body: form,
            })
            .then((res) => {
                return res.json();
            })
            .then((txt) => {
                make_table(txt);
            });
        })
    </script>
</body>
</html>