prefs select option enhance

i18n/locales.go

@@ -81,3 +81,14 @@ func Get(locale, key string) interface{} {
 func GetAll(locale string) map[string]interface{} {
 	return Locales[locale].Langs
 }
+
+// GetLocalesNames gets names of all locales. Returns ["zh_CN", "en_US"] for example.
+func GetLocalesNames() []string {
+	ret := []string{}
+
+	for name, _ := range Locales {
+		ret = append(ret, name)
+	}
+
+	return ret
+}

session/users.go

@@ -58,7 +58,8 @@ func PreferenceHandler(w http.ResponseWriter, r *http.Request) {
 
 	if "GET" == r.Method {
 		model := map[string]interface{}{"conf": conf.Wide, "i18n": i18n.GetAll(user.Locale), "user": user,
-			"ver": conf.WideVersion, "goos": runtime.GOOS, "goarch": runtime.GOARCH, "gover": runtime.Version()}
+			"ver": conf.WideVersion, "goos": runtime.GOOS, "goarch": runtime.GOARCH, "gover": runtime.Version(),
+			"locales": i18n.GetLocalesNames()}
 
 		t, err := template.ParseFiles("views/preference.html")
 

static/css/dialog.css

@@ -113,6 +113,11 @@
     border-top-width: 0;
 }
 
+#dialogPreference .select {
+    width: 100%;
+    margin: 2px auto;
+}
+
 #dialogPreference .tabs-panel {
     padding: 10px;
 }

static/js/menu.js

@@ -285,6 +285,12 @@ var menu = {
     },
     _initPreference: function () {
         $("#dialogPreference").load('/preference', function () {
+            $("#localeSelect").on('change', function () {
+                var $dialogPreference = $("#dialogPreference"),
+                        $locale = $dialogPreference.find("input[name=locale]")
+
+                $locale.val(this.value);
+            });
 
             $("#dialogPreference input").keyup(function () {
                 var isChange = false;
@@ -302,6 +308,22 @@ var menu = {
                 }
             });
 
+            $("#dialogPreference select").on("change", function () {
+                var isChange = false;
+                $("#dialogPreference input").each(function () {
+                    if ($(this).val() !== $(this).data("value")) {
+                        isChange = true;
+                    }
+                });
+
+                var $okBtn = $("#dialogPreference").closest(".dialog-main").find(".dialog-footer > button:eq(0)");
+                if (isChange) {
+                    $okBtn.prop("disabled", false);
+                } else {
+                    $okBtn.prop("disabled", true);
+                }
+            });
+
             $("#dialogPreference").dialog({
                 "modal": true,
                 "height": 460,

views/preference.html

@@ -47,15 +47,22 @@
         <div class="fn-none" data-index="user">
             <label>
                 {{.i18n.locale}}{{.i18n.colon}}
-                <input data-value="{{.user.Locale}}" value="{{.user.Locale}}" name="locale"/>
+                <br/>
+                <select class="select" id="localeSelect">
+                    {{range $index, $localeName := .locales }}
+                    <option name="locale" value="{{$localeName}}" {{if eq $.user.Locale $localeName}}selected="selected"{{end}}>{{$localeName}}</option>
+                    {{end}}
+                </select>
+                <br/>
             </label>
+            <input data-value="{{.user.Locale}}" value="{{.user.Locale}}" name="locale" hidden="hidden" />
             <label>
                 {{.i18n.workspace}}{{.i18n.colon}}
                 <input data-value="{{.user.Workspace}}" value="{{.user.Workspace}}" name="workspace"/>
             </label>
             <label>
                 {{.i18n.password}}{{.i18n.colon}}
-                <input data-value="{{.user.Password}}" value="{{.user.Password}}" name="password"/>
+                <input data-value="{{.user.Password}}" value="{{.user.Password}}" name="password" type="password"/>
             </label>
         </div>
     </div>