Add frontend support

src/main.rs

@@ -20,7 +20,8 @@ use database::{WordDb, DbError};
 
 const DB_DIR: &str = "/usr/share/inflectived";
 const CACHE_DIR: &str = "/var/cache/inflectived";
-const FRONTEND_DIR: &str = "/opt/inflectived";
+//const FRONTEND_DIR: &str = "/opt/inflectived";
+const FRONTEND_DIR: &str = "static";
 
 const MAJOR: i32 = 0;
 const MINOR: i32 = 1;
@@ -84,7 +85,7 @@ async fn main() {
                 }
             }
         },
-        ("run", _) => {
+        ("run", matches) => {
             let figment = rocket::Config::figment()
                                          .merge(("address", "0.0.0.0"));
 
@@ -95,7 +96,7 @@ async fn main() {
                                                      views::get_langs,
                                                      views::frontend]);
 
-            if let Ok(true) = fs::try_exists(FRONTEND_DIR) {
+            if let Ok(_) = fs::try_exists(FRONTEND_DIR) {
                 app = app.mount("/static", FileServer::from(FRONTEND_DIR));
             }
 

static/index.html

@@ -19,9 +19,9 @@
 				<div class="ui-widget" id="search-widget">
 					<input id="search-bar" placeholder="Search..." type="text" autocorrect="off" autocapitalize="none" autofocus>
 				</div>
-				<button type="submit" class="ui-button ui-widget" id="search">
+				<select id="langs">
-					<span class="ui-icon ui-icon-search"></span>
+				</select>
-				</button>
+				<!--<button id="menu"></button>-->
 			</form>
 			<div class="container" id="ajax-content">
 			</div>

static/index.js

@@ -1,8 +1,34 @@
 $(document).ready(() => {
-    let polishSchemas = null;
+    let selectedLang = null;
+    let schema = null;
+    let langs = null;
 
     $.ajax({
-        url: '/static/schemas/polish.json',
+        url: `/langs?installed`,
+        success: data => {
+            langs = data;
+
+            $('#langs').html(data.map(lang => `<option value="${lang.code}">${lang.name}</option>`));
+
+            setLang($('#langs').val());
+        }
+    });
+
+    $('#lang').on('change', e => {
+        console.log(e.target.value);
+
+        let langCode = e.target.value;
+
+        setLang(code);
+    });
+
+    function setLang(code) {
+        let lang = langs.find(lang => lang.code == code);
+
+        selectedLang = lang;
+
+        $.ajax({
+            url: `/static/schemas/${lang.name}.json`,
             success: data => {
                 polishSchemas = data
                 if(window.location.hash) {
@@ -10,6 +36,7 @@ $(document).ready(() => {
                 }
             }
         });
+    }
 
     const searchBar = $('#search-bar');
     const searchForm = $('#search-form');
@@ -23,7 +50,7 @@ $(document).ready(() => {
         appendTo: '#search-form',
         source: (request, response) => {
             $.ajax({
-                url: '/langs/pl/words?like=' + request.term + '&limit=20&offset=0',
+                url: `/langs/${selectedLang.code}/words?like=${request.term}&limit=20&offset=0`,
                 success: data => response(data)
             })
         },
@@ -49,7 +76,7 @@ $(document).ready(() => {
             document.title = `Inflective - ${decodeURIComponent(word)}`;
 
             $.ajax({
-                url: '/langs/pl/words/' + word,
+                url: `/langs/${selectedLang.code}/words/${word}`,
 
                 success: (data) => {
                     ajaxContent.html(generateHtml(word, data));