maint(frontend): add Select InputItem class

webiojs/src/models/input/index.ts

@@ -3,6 +3,7 @@ import {Actions} from "./actions"
 import {CheckboxRadio} from "./checkbox_radio"
 import {Textarea} from "./textarea"
 import {File} from "./file"
+import {Select} from "./select"
 
 
-export const all_input_items = [Input, Actions, CheckboxRadio, Textarea, File];
+export const all_input_items = [Input, Actions, CheckboxRadio, Textarea, File, Select];

webiojs/src/models/input/input.ts

@@ -15,21 +15,10 @@ const common_input_tpl = `
     <div class="valid-feedback">{{valid_feedback}}</div> <!-- input 添加 is-valid 类 -->
     <small id="{{id_name}}_help" class="form-text text-muted">{{help_text}}</small>
 </div>`;
-const select_input_tpl = `
-<div class="form-group">
-    {{#label}}<label for="{{id_name}}">{{label}}</label>{{/label}}
-    <select id="{{id_name}}" aria-describedby="{{id_name}}_help" class="form-control" {{#multiple}}multiple{{/multiple}}>
-        {{#options}}
-        <option value="{{value}}" {{#selected}}selected{{/selected}} {{#disabled}}disabled{{/disabled}}>{{label}}</option>
-        {{/options}}
-    </select>
-    <div class="invalid-feedback">{{invalid_feedback}}</div>
-    <div class="valid-feedback">{{valid_feedback}}</div>
-    <small id="{{id_name}}_help" class="form-text text-muted">{{help_text}}</small>
-</div>`;
+
 
 export class Input extends InputItem {
-    static accept_input_types: string[] = ["text", "password", "number", "color", "date", "range", "time", "select"];
+    static accept_input_types: string[] = ["text", "password", "number", "color", "date", "range", "time"];
 
     constructor(session: Session, task_id: string, spec: any) {
         super(session, task_id, spec);
@@ -42,11 +31,7 @@ export class Input extends InputItem {
         if (spec.datalist)
             spec['list'] = id_name + '-list';
 
-        let html;
-        if (spec.type === 'select')
-            html = Mustache.render(select_input_tpl, spec);
-        else
-            html = Mustache.render(common_input_tpl, spec);
+        let html = Mustache.render(common_input_tpl, spec);
 
         this.element = $(html);
         let input_elem = this.element.find('#' + id_name);
@@ -82,7 +67,7 @@ export class Input extends InputItem {
     }
 
     get_value(): any {
-        return this.element.find('input,select').val();
+        return this.element.find('input').val();
     }
 }
 

webiojs/src/models/input/select.ts

@@ -0,0 +1,71 @@
+import {InputItem} from "./base";
+import {Session} from "../../session";
+import {deep_copy} from "../../utils"
+
+
+const select_input_tpl = `
+<div class="form-group">
+    {{#label}}<label for="{{id_name}}">{{label}}</label>{{/label}}
+    <select id="{{id_name}}" aria-describedby="{{id_name}}_help" class="form-control" {{#multiple}}multiple{{/multiple}}>
+        {{#options}}
+        <option value="{{value}}" {{#selected}}selected{{/selected}} {{#disabled}}disabled{{/disabled}}>{{label}}</option>
+        {{/options}}
+    </select>
+    <div class="invalid-feedback">{{invalid_feedback}}</div>
+    <div class="valid-feedback">{{valid_feedback}}</div>
+    <small id="{{id_name}}_help" class="form-text text-muted">{{help_text}}</small>
+</div>`;
+
+export class Select extends InputItem {
+    static accept_input_types: string[] = ["select"];
+
+    constructor(session: Session, task_id: string, spec: any) {
+        super(session, task_id, spec);
+    }
+
+    create_element(): JQuery {
+        let spec = deep_copy(this.spec);
+        const id_name = spec.name + '-' + Math.floor(Math.random() * Math.floor(9999));
+        spec['id_name'] = id_name;
+
+
+        let html = Mustache.render(select_input_tpl, spec);
+
+        this.element = $(html);
+        let input_elem = this.element.find('#' + id_name);
+
+        // blur事件时，发送当前值到服务器
+        input_elem.on("blur", (e) => {
+            this.send_value_listener(this, e)
+        });
+
+        // 将额外的html参数加到input标签上
+        const ignore_keys = {
+            'type': '',
+            'label': '',
+            'invalid_feedback': '',
+            'valid_feedback': '',
+            'help_text': '',
+            'options': '',
+            'datalist': '',
+            'multiple': ''
+        };
+        for (let key in this.spec) {
+            if (key in ignore_keys) continue;
+            input_elem.attr(key, this.spec[key]);
+        }
+
+        return this.element;
+    }
+
+    update_input(spec: any): any {
+        let attributes = spec.attributes;
+
+        this.update_input_helper(-1, attributes);
+    }
+
+    get_value(): any {
+        return this.element.find('select').val();
+    }
+}
+