Skip to content

Commit

Permalink
codes updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinoytommanjaly
jinoytommanjaly committed Jun 9, 2023
1 parent ed59e98 commit c82da05
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 55 deletions.
54 changes: 34 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,14 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="./style.css" rel="stylesheet">
<title>പഞ്ചായത്ത് വിവരങ്ങൾ</title>
<title>കേരളത്തിലെ പഞ്ചായത്തുകൾ</title>
</head>
<body>
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-half has-text-centered">
<h1 class="title is-4">കേരളത്തിലെ ഗ്രാമപഞ്ചായത്തുകൾ</h1>
<h2 class="title is-5">ഒറ്റനോട്ടത്തില്‍</h2>
<h1 class="title is-4">കേരളത്തിലെ പഞ്ചായത്തുകൾ ഒറ്റനോട്ടത്തിൽ</h1>
</div>
</div>
</div>
Expand All @@ -23,6 +22,7 @@ <h2 class="title is-5">ഒറ്റനോട്ടത്തില്‍</h2>
<div align=center><div class="dropdown">
<label for="location-select">ജില്ല തിരഞ്ഞെടുക്കുക:</label>
<select id="location-select">
<option value="Q1419703">------</option>
<option value="Q1419703">കാസർഗോഡ്</option>
<option value="Q2980652">കണ്ണൂർ</option>
<option value="Q1142979">കോഴിക്കോട്</option>
Expand All @@ -47,22 +47,40 @@ <h2 class="title is-5">ഒറ്റനോട്ടത്തില്‍</h2>
</div>
</div>
</br>
<div><div class="loading" id="loading-animation">
<div class="loading-icon"></div>
</div>
<h5 class="subtitle is-5 has-text-centered" id="loading-animation">വാർഡുകൾ (എണ്ണം)</h5>
<h5 class="subtitle is-3 has-text-centered" id="wards-count"></h5>
<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-3 has-text-centered" id="wards-count"></h3>
<table class="table is-bordered is-centered" id="panchayat-table">
<table class="table is-bordered centered-table" id="panchayat-table">
<thead>
<tr>
<th>വിസ്തീർണ്ണം</th>
<th>LGD കോഡ്</th>
<th>LSG കോഡ്</th>
<th>LGD കോഡ് <div class="popup-container">
<span> 🛈</span>
<div class="popup-content">
<p>ലോക്കൽ ഗവൺമെന്റ് ഡയറക്ടറിയിൽ കേന്ദ്ര, സംസ്ഥാന, റവന്യൂ, തദ്ദേശസ്വയംഭരണ സ്ഥാപനങ്ങളുടെയും അവയുടെ വാർഡുകൾക്കും ഇന്ത്യ സർക്കാർ നൽകുന്ന കോഡ്</p></th>
<th>LSG കോഡ് <div class="popup-container">
<span> 🛈</span>
<div class="popup-content">
<p>കേരള തദ്ദേശ സ്വയംഭരണ വകുപ്പ് തദ്ദേശ സ്ഥാപനങ്ങൾ നൽകുന്ന കോഡ്</p></th>
<th>SEC കോഡ് <div class="popup-container">
<span> 🛈</span>
<div class="popup-content">
<p>കേരള സംസ്ഥാന തിരഞ്ഞെടുപ്പ് കമ്മീഷൻ തദ്ദേശ സ്ഥാപനങ്ങൾക്കും വാർഡുകൾക്കും നൽകുന്ന കോഡ്</p></th>
</tr>
</thead>
<tbody id="panchayat-data">
</tbody>
</table>
<table class="table is-bordered is-centered" id="population-table">
</div>
<style>
#panchayat-table {
display: table !important;
}
</style>
<table class="table is-bordered centered-table" id="population-table">
<thead>
<tr>
<th>ജനസംഖ്യ</th>
Expand All @@ -75,10 +93,7 @@ <h3 class="subtitle is-3 has-text-centered" id="wards-count"></h3>
</table>
</div>
</div>
<div class="loading" id="loading-animation">
<div class="loading-icon"></div>
<div>Loading...</div>
</div>
</div>
<script>
const locationSelect = document.getElementById('location-select');
const panchayatSelect = document.getElementById('panchayat-select');
Expand Down Expand Up @@ -139,20 +154,19 @@ <h3 class="subtitle is-3 has-text-centered" id="wards-count"></h3>
const selectedPanchayatURI = panchayatSelect.value;
if (selectedPanchayatURI) {
const sparqlQueryData = `
SELECT ?panchayatLabel ?population ?area ?literacyRate ?malePopulation ?femalePopulation ?LGDcode ?LSGcode (COUNT(?wards) AS ?wardsCount)
SELECT ?panchayatLabel ?population ?malePopulation ?femalePopulation ?LGDcode ?LSGcode ?SECcode (COUNT(?wards) AS ?wardsCount)
WHERE {
<${selectedPanchayatURI}> rdfs:label ?panchayatLabel.
OPTIONAL { <${selectedPanchayatURI}> wdt:P1082 ?population }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P2046 ?area }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P6897 ?literacyRate }.
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 }.
OPTIONAL { <${selectedPanchayatURI}> wdt:P11817 ?SECcode }.
FILTER(LANG(?panchayatLabel) = 'ml')
}
GROUP BY ?panchayatLabel ?population ?area ?literacyRate ?malePopulation ?femalePopulation ?LGDcode ?LSGcode
GROUP BY ?panchayatLabel ?population ?malePopulation ?femalePopulation ?LGDcode ?LSGcode ?SECcode
LIMIT 1
`;

Expand All @@ -176,20 +190,20 @@ <h3 class="subtitle is-3 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 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';
const SECcode = panchayat.SECcode?.value || 'N/A';

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

const panchayatRow = `
<tr>
<td class="has-text-centered">${area}</td>
<td class="has-text-centered">${LGDcode}</td>
<td class="has-text-centered">${LSGcode}</td>
<td class="has-text-centered">${SECcode}</td>
</tr>
`;
panchayatData.innerHTML = panchayatRow;
Expand Down
80 changes: 45 additions & 35 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@

.loading::before {
content: "";
width: 60px;
height: 60px;
width: 40px;
height: 40px;
border-radius: 100%;
border: 1px solid #555;
border-top-color: transparent;
Expand All @@ -61,33 +61,7 @@
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
opacity: 0.8;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.btn {
background-color: #4CAF50;
Expand All @@ -106,19 +80,22 @@
.btn:hover {opacity: 0.4}

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

.arrow {
text-align: center;
margin: 6% 0;
}

table {
margin-top: 20px;
width: 100%;
border-collapse: collapse;
.container {
max-width: 100%;
}

.table {
margin-left: auto;
margin-right: auto;
}

table th {
Expand All @@ -133,6 +110,34 @@
has-text-centered;
}

.centered-table {
margin-left: auto;
margin-right: auto;
}

.popup-container {
position: relative;
display: inline-block;
}

.popup-content {
display: none;
position: absolute;
right: 100%;
top: 0;
width: 200px;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 1;
}

.popup-container:hover .popup-content {
display: block;
}

@keyframes spin {
0% {
transform: rotate(0deg);
Expand All @@ -142,9 +147,14 @@
}
}

.footer{
padding-top: 10px;
padding-bottom: 20px;
}

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

0 comments on commit c82da05

Please sign in to comment.