Skip to content

Commit

Permalink
Table updts
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinoytommanjaly
jinoytommanjaly committed Jun 8, 2023
1 parent 59d9534 commit a0612c7
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 41 deletions.
86 changes: 54 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
<div class="container">
<div class="columns is-centered">
<div class="column is-half has-text-centered">
<h2 class="title is-4">കേരളത്തിലെ ഗ്രാമപഞ്ചായത്തുകൾ ഒറ്റനോട്ടത്തില്‍</h2>
<h1 class="title is-4">കേരളത്തിലെ ഗ്രാമപഞ്ചായത്തുകൾ</h1>
<h2 class="title is-5">ഒറ്റനോട്ടത്തില്‍</h2>
</div>
</div>
</div>
Expand All @@ -38,46 +39,53 @@ <h2 class="title is-4">കേരളത്തിലെ ഗ്രാമപഞ്
<option value="Q162612">തിരുവനന്തപുരം</option>
</select>
</div>
</div>

<div>
<div align=center><div class="dropdown">
<div align=center><div class="dropdown">
<label for="panchayat-select">പഞ്ചായത്ത് തിരഞ്ഞെടുക്കുക:</label>
<select id="panchayat-select" disabled>
<option value="">...പഞ്ചായത്ത്</option>
</select>
</div>
</div>
</div>
</div>
</br>
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<h4 class="subtitle is-4 has-text-centered">വാർഡുകൾ</h4>
<h3 class="subtitle is-2 has-text-centered" id="wards-count"></h3>
<table class="table is-bordered" id="panchayat-table">
<h3 class="subtitle is-3 has-text-centered" id="wards-count"></h3>
<table class="table is-bordered is-centered" id="panchayat-table">
<thead>
<tr>
<th>ജനസംഖ്യ</th>
<th>വിസ്തീർണ്ണം</th>
<th>പുരുഷജനസംഖ്യ</th>
<th>സ്ത്രീജനസംഖ്യ</th>
<th>LGD കോഡ്</th>
<th>LSG കോഡ്</th>
</tr>
</thead>
<tbody id="panchayat-data">
</tbody>
</table>
<table class="table is-bordered is-centered" id="population-table">
<thead>
<tr>
<th>ജനസംഖ്യ</th>
<th>പുരുഷജനസംഖ്യ</th>
<th>സ്ത്രീജനസംഖ്യ</th>
</tr>
</thead>
<tbody id="population-data">
</tbody>
</table>
</div>
</div>

<div class="loading" id="loading-animation">
<div class="loading-icon"></div>
<div>Loading...</div>
</div>

<script>
const locationSelect = document.getElementById('location-select');
const panchayatSelect = document.getElementById('panchayat-select');
const panchayatTable = document.getElementById('panchayat-table');
const populationTable = document.getElementById('population-table');
const panchayatData = document.getElementById('panchayat-data');
const populationData = document.getElementById('population-data');
const loadingAnimation = document.getElementById('loading-animation');

function fetchPanchayatList() {
Expand All @@ -92,7 +100,7 @@ <h3 class="subtitle is-2 has-text-centered" id="wards-count"></h3>
FILTER(LANG(?panchayatLabel) = 'ml')
}
ORDER BY ?panchayatLabel
LIMIT 100
LIMIT 150
`;

const url = `https://query.wikidata.org/bigdata/namespace/wdq/sparql?query=${encodeURIComponent(sparqlQueryList)}`;
Expand Down Expand Up @@ -123,14 +131,15 @@ <h3 class="subtitle is-2 has-text-centered" id="wards-count"></h3>
panchayatSelect.innerHTML = '<option value="">...പഞ്ചായത്ത്</option>';
panchayatSelect.disabled = true;
panchayatTable.style.display = 'none';
populationTable.style.display = 'none';
}
}

function fetchPanchayatData() {
const selectedPanchayatURI = panchayatSelect.value;
if (selectedPanchayatURI) {
const sparqlQueryData = `
SELECT ?panchayatLabel ?population ?area ?literacyRate ?malePopulation ?femalePopulation (COUNT(?wards) AS ?wardsCount)
SELECT ?panchayatLabel ?population ?area ?literacyRate ?malePopulation ?femalePopulation ?LGDcode ?LSGcode (COUNT(?wards) AS ?wardsCount)
WHERE {
<${selectedPanchayatURI}> rdfs:label ?panchayatLabel.
OPTIONAL { <${selectedPanchayatURI}> wdt:P1082 ?population }.
Expand All @@ -139,18 +148,21 @@ <h3 class="subtitle is-2 has-text-centered" id="wards-count"></h3>
OPTIONAL { <${selectedPanchayatURI}> wdt:P1540 ?malePopulation }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P1539 ?femalePopulation }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P527 ?wards }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P6425 ?LGDcode }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P8573 ?LSGcode }.
FILTER(LANG(?panchayatLabel) = 'ml')
}
GROUP BY ?panchayatLabel ?population ?area ?literacyRate ?malePopulation ?femalePopulation
GROUP BY ?panchayatLabel ?population ?area ?literacyRate ?malePopulation ?femalePopulation ?LGDcode ?LSGcode
LIMIT 1
`;

const url = `https://query.wikidata.org/bigdata/namespace/wdq/sparql?query=${encodeURIComponent(sparqlQueryData)}`;

panchayatTable.style.display = 'none';
populationTable.style.display = 'none';
loadingAnimation.style.display = 'flex';

const wardsCountElement = document.getElementById('wards-count');
const wardsCountElement = document.getElementById('wards-count');

fetch(url, {
headers: {
Expand All @@ -164,42 +176,52 @@ <h3 class="subtitle is-2 has-text-centered" id="wards-count"></h3>
const panchayatLabel = panchayat.panchayatLabel?.value || 'N/A';
const wardsCount = panchayat.wardsCount?.value || 'N/A';
const population = panchayat.population?.value || 'N/A';
const area = panchayat.area?.value || 'N/A';
const area = panchayat.area?.value + " ച.മീ" || 'N/A';
const malePopulation = panchayat.malePopulation?.value || 'N/A';
const femalePopulation = panchayat.femalePopulation?.value || 'N/A';
const LGDcode = panchayat.LGDcode?.value || 'N/A';
const LSGcode = panchayat.LSGcode?.value || 'N/A';

// Set the wardsCount value
wardsCountElement.textContent = wardsCount;
// Set the wardsCount value
wardsCountElement.textContent = wardsCount;

const row = `
const panchayatRow = `
<tr>
<td class="has-text-centered">${population}</td>
<td class="has-text-centered">${area}</td>
<td class="has-text-centered">${LGDcode}</td>
<td class="has-text-centered">${LSGcode}</td>
</tr>
`;
panchayatData.innerHTML = panchayatRow;

const populationRow = `
<tr>
<td class="has-text-centered">${population}</td>
<td class="has-text-centered">${malePopulation}</td>
<td class="has-text-centered">${femalePopulation}</td>
</tr>
`;
panchayatData.innerHTML = row;
populationData.innerHTML = populationRow;

panchayatTable.style.display = 'block';
populationTable.style.display = 'block';
} else {
panchayatData.innerHTML = '<tr><td colspan="6">ഡാറ്റ കണ്ടെത്തിയില്ല</td></tr>';
panchayatData.innerHTML = '<tr><td colspan="3">ഡാറ്റ കണ്ടെത്തിയില്ല</td></tr>';
populationData.innerHTML = '<tr><td colspan="3">ഡാറ്റ കണ്ടെത്തിയില്ല</td></tr>';
panchayatTable.style.display = 'none';
populationTable.style.display = 'none';
}

loadingAnimation.style.display = 'none';
})
.catch(error => {
console.error('Error:', error);
panchayatData.innerHTML = '<tr><td colspan="6">ഡാറ്റ ലഭ്യമാക്കുന്നതിൽ പിശക്</td></tr>';
panchayatTable.style.display = 'none';
loadingAnimation.style.display = 'none';
});

} else {
panchayatData.innerHTML = '';
populationData.innerHTML = '';
panchayatTable.style.display = 'none';
populationTable.style.display = 'none';
}
}

locationSelect.addEventListener('change', fetchPanchayatList);
panchayatSelect.addEventListener('change', fetchPanchayatData);
</script>
Expand Down
19 changes: 10 additions & 9 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@
}

.loading.show-loading {
display: flex;
display: none;
}

.loading::before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid #555;
border-top-color: transparent;
animation: spin 1s linear infinite;
animation: spin 0.5s linear infinite;
}

.suggestion-list {
Expand All @@ -57,7 +57,7 @@
}

.suggestion-list-item {
padding: 5px;
padding: 10px;
cursor: pointer;
}

Expand Down Expand Up @@ -103,10 +103,10 @@
justify-content: center;
}

.btn:hover {opacity: 0.6}
.btn:hover {opacity: 0.4}

.section{
padding-top: 52px;
padding-top: 42px;
padding-bottom: 36px;
}

Expand All @@ -130,6 +130,7 @@
table td {
padding: 8px;
text-align: center;
has-text-centered;
}

@keyframes spin {
Expand All @@ -143,7 +144,7 @@

@media (min-width: 768px) {
.container {
max-width: 710px;
max-width: 720px;
}
}
</style>

0 comments on commit a0612c7

Please sign in to comment.