Use language code instead of language name; removed 'unavail' language; don't add text for districts

Added loading indicator when translations are being retrieved
Replace text on map with translation
2025-03-02 22:05:35 -05:00 · 2025-03-02 22:02:23 -05:00 · 2025-03-02 22:02:02 -05:00 · 2025-03-02 22:01:46 -05:00
4 changed files with 94 additions and 1595 deletions
--- a/index.html
+++ b/index.html
@@ -66,24 +66,35 @@
 /*			.district:hover ~ .districtText {
 				visibility: visible;
 			}*/
+
+
+			.loading-indicator {
+					display: none;
+			}
+			.htmx-request.loading-indicator /* While request is being made */ {
+					display: inline;
+			}
 		</style>
 	</head>
 	<body>
 		<main>
 		<section id="textStuff">
 			<h1>Indian Translate</h1>
-			<form hx-get="/submit" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
+			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
 				<label for="query">Enter text to translate:</label>
 				<input type="text" name="query" id="query" required/>
 				<input type="submit" value="Translate"/>
 			</form>
+		<progress id="loading-screen" class="loading-indicator"></progress>
 		</section>

 		<svg id = "indiaMap" width="1000" height="1000"></svg>
 		</main>

-		<script src="index.js"></script>
-		<script src="updateTranslations.js"></script>
+		<script type="text/javascript" src="index.js"></script>
+		<script type="text/javascript" src="updateTranslations.js"></script>
+
+
 	</body>
 </html>

--- a/index.js
+++ b/index.js
@@ -25,7 +25,7 @@ const santaliColor = "#96bf60" // Santhali
 const sindhiColor = "#e89931" // Sindhi
 const awadhiColor = "#847fb5" // Awadhi

-const unavailLangColor = "#555555"
+const defaultColor = "#555555"

 const languages = {
 			tamil: {name: "Tamil", color: tamilColor, code: "ta", districts: []},
@@ -52,7 +52,6 @@ const languages = {
 			santali: {name: "Santali", color: santaliColor, code: "sat", districts: []},
 			sindhi: {name: "Sindhi", color: sindhiColor, code: "sd", districts: []},
 			awadhi: {name: "Awadhi", color: awadhiColor, code: "awa", districts: []},
-			unavail: {name: "Unavailable", color: unavailLangColor, code: "unavailable", districts: []},
 			};

 // Credit: https://www.artcraftblend.com/blogs/colors/shades-of-pastel
@@ -71,12 +70,9 @@ const state2lang = {
 		"Jharkhand": languages["hindi"], // DEFAULT
 		"West Bengal": languages["bengali"],
 		"Assam": languages["assamese"],
-		"Meghalaya": languages["unavail"], // DEFAULT
 		"Tripura": languages["bengali"],
 		"Mizoram": languages["mizo"],
 		"Manipur": languages["manipuri"],
-		"Nagaland": languages["unavail"], // DEFAULT
-		"Arunachal Pradesh": languages["unavail"], // DEFAULT
 		"Sikkim": languages["nepali"],
 		"Bihar": languages["bhojpuri"],
 		"Madhya Pradesh": languages["hindi"],
@@ -91,7 +87,6 @@ const state2lang = {
 		"Dadra and Nagar Haveli and Daman and Diu": languages["gujarati"],
 		"Puducherry": languages["tamil"],
 		"Lakshadweep": languages["malayalam"],
-		"Andaman and Nicobar Islands": languages["unavail"],
 		"Delhi": languages["hindi"],
 		"Chandigarh": languages["hindi"]

@@ -239,15 +234,26 @@ function drawMap(world) {
 		.attr("class", d => stateOrDistrictOrLanguage(d))
 		.attr("fill", function(d) {
 				if (stateOrDistrictOrLanguage(d) === "district") {
-								return district2lang.hasOwnProperty(d.properties.district) ?
-								district2lang[d.properties.district].color :
-								state2lang[d.properties.st_nm].color
+					if (district2lang.hasOwnProperty(d.properties.district)) {
+						return district2lang[d.properties.district].color;
+					} else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
+						return state2lang[d.properties.st_nm].color;
+					} else {
+						return defaultColor;
+					}
 				}
 		})
 		.each(function(d) {
 				if (stateOrDistrictOrLanguage(d) === "district") {
-						districtLang = district2lang.hasOwnProperty(d.properties.district) ? district2lang[d.properties.district] : state2lang[d.properties.st_nm];
-						districtLang.districts.push(d)
+						let districtLang;
+						if (district2lang.hasOwnProperty(d.properties.district)) {
+							districtLang = district2lang[d.properties.district];
+						} else if (state2lang.hasOwnProperty(d.properties.st_nm)) {
+							districtLang = state2lang[d.properties.st_nm];
+						}
+						if (typeof districtLang !== 'undefined') {
+							districtLang.districts.push(d)
+						}
 				}
 		})
 		.append("title") // Tooltip
@@ -259,13 +265,19 @@ function drawMap(world) {
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("fill", "black")
-		.attr("class", "languageText")
-		.attr("id", d => d.properties.lang_name+"Text")
+	  .attr("class", "languageText")
+	  .attr("id", function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_code+"Text"
+			} else {
+				d3.select(this).remove()
+			}
+	  })
      .text(function(d) {
 			if (stateOrDistrictOrLanguage(d) == "language") {
 				return d.properties.lang_name;
 			} else {
-				return d.properties.district;
+				d3.select(this).remove() // Only add text if the element is a language
 			}
 		});

@@ -291,6 +303,7 @@ function drawMap(world) {
 	// 	let outerBound = getOuterBoundaryPolygon(geojson.features)
 	// 	outerBound["id"] = "lang" + lang.name
 	// 	outerBound.properties["lang_name"]= lang.name
+	// 	outerBound.properties["lang_code"]= lang.code
 	// 	allLangs.push(outerBound);

 	// 	svg.append("path")
--- a/india_with_districts_with_languages.json
+++ b/india_with_districts_with_languages.json
--- a/updateTranslations.js
+++ b/updateTranslations.js
@@ -1,3 +1,6 @@
 function updateTranslations(response) {
-	console.log(response)
+		const translations = JSON.parse(response);
+		document.querySelectorAll(".languageText").forEach(element => {
+			element.textContent = translations[element.id.replace("Text", "")];
+		});
 }
Author	SHA1	Message	Date
Aadhavan Srinivasan	42e31dab13	Use language code instead of language name; removed 'unavail' language; don't add text for districts	2025-03-02 22:05:35 -05:00
Aadhavan Srinivasan	da3b3b8a16	Added loading indicator when translations are being retrieved	2025-03-02 22:02:23 -05:00
Aadhavan Srinivasan	0de268eec5	Replace text on map with translation	2025-03-02 22:02:02 -05:00
Aadhavan Srinivasan	2b8bed7587	Added language codes for all languages; removed 'unavail' langauge (not really a language)	2025-03-02 22:01:46 -05:00