riot filter

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.1/riot+compiler.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<filter></filter>
<textarea id="salida" rows="4" cols="30" style="margin:6px 15px 15px"></textarea>
<script  type="riot/tag">
  <raw>
      riot.mountTo(this.root, opts.content.tag, opts.content)
  </raw>
    
  <string>
     <input type="text" class="form-control" name="{ opts.name }" />
  </string>
    
  <choose>
      <select class="form-control"  name="{ opts.name }">
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>
  </choose>
    
  <checkbox>
     <label><input type="checkbox"  name="{ opts.name }"/> {opts.text}</label>
  </checkbox>
   
  <filter>
      <h3>Filter</h3>
      <form class="form-horizontal" role="form">
          <div class="form-group"  each={inp in inputs }>
              <label  class="control-label col-sm-2" for="text">{ inp.tag!='checkbox'?inp.name : '' }</label>
              <div class="col-sm-10">
                  <raw content="{ inp }" />
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
            <button onclick={finish} type="submit" class="btn btn-primary">submit</button>
                  </div>
          </div>
      </form>
          
      this.inputs = [{"name":"provincia","tag":"choose"},
                    {"name":"filtro","tag":"string"},
                    {"name":"empty","tag":"checkbox", "text":"solo vacias"}]
          
      add(){
          console.log(fieldName.value + " "+ inputType.value)
          this.inputs.push({"name": fieldName.value,"tag": inputType.value})
         ...

CSS

body,html{
    width:100%;
    height:100%;
}

filter{
    display: block;
    padding: 15px 15px 15px;
        position: relative;
        border:1px solid #888;
}

JavaScript

riot.mount('filter')