Semantic-Web/index.html at master · hexanome4if/Semantic-Web · 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
<!doctype html>

<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Spot-IF-y Pedia</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
            .track-table {
                border: solid 1px #DDEEEE;
                border-collapse: collapse;
                border-spacing: 0;
                font: normal 13px Arial, sans-serif;
            }
            .track-table thead th {
                background-color: #DDEFEF;
                border: solid 1px #DDEEEE;
                color: #336B6B;
                padding: 10px;
                text-align: left;
                text-shadow: 1px 1px 1px #fff;
            }
            .track-table tbody td {
                border: solid 1px #DDEEEE;
                color: #333;
                padding: 10px;
                text-shadow: 1px 1px 1px #fff;
            }
            div.form {
                display: block;
                text-align: center;
            }
            form {
                display: inline-block;
                margin-left: auto;
                margin-right: auto;
                text-align: left;
            }
        </style>
    </head>

    <body>
        <h1 style="text-align:center;">
            Welcome to Spot-IF-y Pedia!</h1>
        <div class="form">
            <FORM name="search-bar" action="" method="GET">
                What are you looking for?
                <INPUT type="text" name="inputbox" value="" id="input-box">
                <INPUT type="button" name="button" value="Search" onclick="populate()">

            </form>
        </div>
    </body>
</html></br><div id="content">
<table class="track-table" id="tracks" style='display:none'>
    <tr>
        <th>Name</th>
        <th>Genres</th>
        <th>Albums</th>
        <th>Artists</th>
        <th>Release Dates</th>
        <th>Producers</th>
        <th>Record Labels</th>
        <th>Writers</th>
        <th>Description</th>
    </tr>
</table>
<h2 id="not-found" style="display: none; text-align: center;">No content found.</h2>
</div>
<script>
function clearTable(table) {
    let rows = table.rows;
    let i = rows.length;
    while (-- i) {
        table.deleteRow(i);
    }
}
function populate() {
    let title = document.getElementById("input-box").value;
    let table = document.getElementById("tracks");
    let not_found = document.getElementById("not-found");
    clearTable(table);
    table.style.display = '';
    fetch(`http://dbpedia.org/sparql?query=SELECT%20DISTINCT%20?Name%20?Desc%20(GROUP_CONCAT(DISTINCT%20?Genres;%20SEPARATOR="||")%20AS%20?Genres)%20(GROUP_CONCAT(DISTINCT%20?Artists;%20SEPARATOR="||")%20AS%20?Artists)%20(GROUP_CONCAT(DISTINCT%20?Albums;%20SEPARATOR="||")%20AS%20?Albums)%20(GROUP_CONCAT(DISTINCT%20?ReleaseDates;%20SEPARATOR="||")%20AS%20?ReleaseDates)%20(GROUP_CONCAT(DISTINCT%20?Producers;%20SEPARATOR="||")%20AS%20?Producers)%20(GROUP_CONCAT(DISTINCT%20?RecordLabels;%20SEPARATOR="||")%20AS%20?RecordLabels)%20(GROUP_CONCAT(DISTINCT%20?Writers;%20SEPARATOR="||")%20AS%20?Writers)%20WHERE%20{%20?Track%20rdf:type%20dbo:Single.%20?Track%20rdfs:label%20?Name.%20?Track%20dbo:album%20?AlbumsLinks.%20?Track%20dbo:genre%20?GenresLinks.%20?Track%20dbo:musicalArtist%20?ArtistsLinks.%20?Track%20dbo:releaseDate%20?ReleaseDates.%20OPTIONAL%20{%20?Track%20dbo:abstract%20?Desc.%20FILTER(langMatches(lang(?Desc),%20"en")).%20}%20OPTIONAL%20{%20?Track%20dbo:producer%20?ProducersLink.%20?ProducersLink%20rdfs:label%20?Producers.%20FILTER(langMatches(lang(?Producers),%20"en")).%20}%20OPTIONAL%20{%20?Track%20dbo:recordLabel%20?LabelsLinks.%20?LabelsLinks%20rdfs:label%20?RecordLabels.%20FILTER(langMatches(lang(?RecordLabels),%20"en")).%20}%20OPTIONAL%20{%20?Track%20dbo:writer%20?WritersLinks.%20?WritersLinks%20rdfs:label%20?Writers.%20FILTER(langMatches(lang(?Writers),%20"en")).%20}%20?AlbumsLinks%20rdfs:label%20?Albums.%20?GenresLinks%20rdfs:label%20?Genres.%20?ArtistsLinks%20rdfs:label%20?Artists.%20FILTER(regex(?Name,%20".*${title}.*")).%20FILTER(langMatches(lang(?Name),%20"en")).%20FILTER(langMatches(lang(?Albums),%20"en")).%20FILTER(langMatches(lang(?Genres),%20"en")).%20FILTER(langMatches(lang(?Artists),%20"en")).%20}%20GROUP%20BY%20?Name%20?Desc`, {
        "method": "GET",
        "headers": {
            "Accept": "application/json"
        }
    }).then(response => response.json()).then(function (data) {
        let tracks = data.results.bindings;
        if (tracks.length == 0) {
            table.style.display = 'none';
            not_found.style.display='';
            return;
        }
        not_found.style.display='none';
        return tracks.map(function (track) {
            let row = table.insertRow(table.length);
            let cell1 = row.insertCell(0);
            let cell2 = row.insertCell(1);
            let cell3 = row.insertCell(2);
            let cell4 = row.insertCell(3);
            let cell5 = row.insertCell(4);
            let cell6 = row.insertCell(5);
            let cell7 = row.insertCell(6);
            let cell8 = row.insertCell(7);
            let cell9 = row.insertCell(8);
            cell1.innerHTML = track.Name.value;
            cell2.innerHTML = track.Genres.value;
            cell3.innerHTML = track.Albums.value;
            cell4.innerHTML = track.Artists.value;
            cell5.innerHTML = track.ReleaseDates.value;
            cell6.innerHTML = track.Producers.value;
            cell7.innerHTML = track.RecordLabels.value;
            cell8.innerHTML = track.Writers.value;
            cell9.innerHTML = track.Desc.value;
        })
    }).catch(err => {
        console.log(err);
    });
}</script></body></html>