Updated DB

golangServer/testing.go

@@ -24,10 +24,10 @@ type translationStruct struct {
 	Mr       string `db:"marathi" json:"mr"`
 	Ta       string `db:"tamil" json:"ta"`
 	Te       string `db:"telugu" json:"te"`
-	Ml       string `db:"malayalam" json:"ml"`
 	Kn       string `db:"kannada" json:"kn"`
-	Gu       string `db:"gujarati" json:"gu"`
+	Ml       string `db:"malayalam" json:"ml"`
 	Or       string `db:"oriya" json:"or"`
+	Gu       string `db:"gujarati" json:"gu"`
 	Ur       string `db:"urdu" json:"ur"`
 	Lus      string `db:"mizo" json:"lus"`
 	As       string `db:"assamese" json:"as"`
@@ -50,10 +50,10 @@ var lang_codes []string = []string{
 	"mr",       // Marathi
 	"ta",       // Tamil
 	"te",       // Telugu
-	"ml",       // Malayalam
 	"kn",       // Kannada
-	"gu",       // Gujarati
+	"ml",       // Malayalam
 	"or",       // Oriya
+	"gu",       // Gujarati
 	"ur",       // Urdu
 	"lus",      // Mizo
 	"as",       // Assamese

index.html

@@ -39,21 +39,25 @@
 				fill-opacity: 0.8;
 				stroke-width: 1;
 			}
-			.languageText, .romanizationText {
+			.translationText, .romanizationText {
 	/*			visibility: hidden; */
 				font-family: "Noto Sans";
 				font-size:1.25em;
-				pointer-events: none;
 			}
 
-	/*		
-			.language:hover ~ .languageText {
-				visibility: visible;
-			}
-			.language:hover ~ .romanizationText {
-				visibility: visible;
-			}
-	 */
+         .romanizationText {
+            pointer-events: none;
+         }
+
+         .languageText {
+            pointer-events: none;
+            font-weight: bold;
+            font-family: sans-serif;
+            visibility: hidden;
+         }
+         .language:hover ~ .languageText {
+            visibility: visible;
+         }
 
 			.testClass:hover {
 				fill: red;

index.js

@@ -232,20 +232,42 @@ function drawMap(world) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
 					rtv = projection(d3.geoCentroid(d))[0];
 					if (d.properties.lang_name == "Kannada") {
-						rtv -= 10;
+						rtv -= 20;
 					}
+               if (d.properties.lang_name == "Tamil") {
+                  rtv += 20;
+               }
+               if (d.properties.lang_name == "Maithali") {
+                  rtv += 10;
+               }
 					return rtv
 				}
 			})
       .attr("y", function(d) {
 				if (stateOrDistrictOrLanguage(d) == "language") {
-					return projection(d3.geoCentroid(d))[1]
+					rtv = projection(d3.geoCentroid(d))[1]
+               if (d.properties.lang_name == "Kannada") {
+                  rtv += 15;
+               }
+               if (d.properties.lang_name == "Tamil") {
+                  rtv -= 20;
+               }
+               if (d.properties.lang_name == "Gujarati") {
+                  rtv -= 10;
+               }
+               if (d.properties.lang_name == "Mizo") {
+                  rtv += 20;
+               }
+               if (d.properties.lang_name == "Nepali") {
+                  rtv -= 10;
+               }
+
+               return rtv
 				}
 		})	
       .attr("text-anchor", "middle")
-      .attr("font-size", "12px")
       .attr("fill", "black")
-	  .attr("class", "languageText")
+	  .attr("class", "translationText")
 	  .attr("id", function(d) {
 			if (stateOrDistrictOrLanguage(d) == "language") {
 				return d.properties.lang_code+"Text"
@@ -261,15 +283,15 @@ function drawMap(world) {
 			}
 		});
 
+   // Romanization
 	states.append("text")
       .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
 							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
 							projection(d3.geoCentroid(d))[0])
       .attr("y", d => stateOrDistrictOrLanguage(d) == "language" ? 
-							parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) + parseFloat(getComputedStyle(document.getElementsByClassName('languageText')[0]).getPropertyValue('font-size')) :
+							parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) + parseFloat(getComputedStyle(document.getElementsByClassName('translationText')[0]).getPropertyValue('font-size')) :
 			 				projection(d3.geoCentroid(d))[1])
       .attr("text-anchor", "middle")
-      .attr("font-size", "12px")
       .attr("fill", "black")
 	  .attr("class", "romanizationText")
 	  .attr("id", function(d) {
@@ -285,6 +307,37 @@ function drawMap(world) {
 			}
 		});
 
+   // Language
+	states.append("text")
+      .attr("x", d => stateOrDistrictOrLanguage(d) == "language" ? 
+							document.getElementById(d.properties.lang_code + "Text").getAttribute("x") : 
+							projection(d3.geoCentroid(d))[0])
+      .attr("y", d => stateOrDistrictOrLanguage(d) == "language" ? 
+							parseFloat(document.getElementById(d.properties.lang_code + "Text").getAttribute("y")) - parseFloat(getComputedStyle(document.getElementsByClassName('translationText')[0]).getPropertyValue('font-size')) :
+			 				projection(d3.geoCentroid(d))[1])
+      .attr("text-anchor", "middle")
+      .attr("fill", "black")
+	  .attr("class", "languageText")
+	  .attr("id", function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_code+"Language"
+			} else {
+				d3.select(this).remove()
+			}
+	  })
+      .each(function(d) {
+			if (!stateOrDistrictOrLanguage(d) == "language") {
+				d3.select(this).remove() // Only add this attribute if the element is a language
+			}
+      })
+      .text(function(d) {
+			if (stateOrDistrictOrLanguage(d) == "language") {
+				return d.properties.lang_name;
+			} else {
+				d3.select(this).remove() // Only add this attribute if the element is a language
+			}
+		});
+
 		let allLangs = []
 
 	const coordinates = [77.69916967457782,23.389970772934166];

updateTranslations.js

@@ -1,10 +1,10 @@
 function hideText(request) {
-		document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
+		document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
 }
 
 function updateTranslations(response) {
 		const translations = JSON.parse(response);
-		document.querySelectorAll(".languageText").forEach(element => {
+		document.querySelectorAll(".translationText").forEach(element => {
 			element.textContent = translations[element.id.replace("Text", "")];
 		});
 
@@ -28,6 +28,6 @@ function updateTranslations(response) {
 				}
 			});
 			// Show elements again
-			document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'visible')
+			document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'visible')
 		});
 }

xlit_server.py

@@ -201,8 +201,8 @@ def romanizeHandler():
     "mr": "mr",
     "ta": "ta",
     "te": "te",
-    "ml": "ml",
     "kn": "kn",
+    "ml": "ml",
     "or": "or",
     "gu": "gu",
     "ur": "ur",
@@ -243,6 +243,7 @@ def romanizeHandler():
       "awadhi": "awa",
       "english": "en",
     }
+    code2lang = {v:k for k,v in lang2code.items()}
 
     rtv = dict()
 
@@ -279,7 +280,7 @@ def romanizeHandler():
     
     rtvJson = jsonify(rtv)
     rtv["en"] = englishWord
-    cur.execute("INSERT INTO romanizations VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)", tuple(rtv.values()))
+    cur.execute("INSERT INTO romanizations " + str(tuple([code2lang[val] for val in rtv.keys()])) + " VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)", tuple(rtv.values()))
     con.commit()
 
     con.close()