scenarios.tag.html 2.44 KB
Newer Older
1 2
<scenarios>
  <ul>
3
    <h2 class="page-title">Scénarios</h2>
4 5 6 7 8
    <li each={ filter in this.filters }><a href="#" onclick={ this.toggle } class='{ on: this.selected_filters && (this.selected_filters.indexOf(filter) != -1) }' title={ filter }>{ filter }</a></li>
  </ul>
  <div if={ this.selected_filters.length && this.active.length }>
    <!-- <h3>{ this.feature.path } <a href=https://framagit.org/ybon/trefle/tree/master/trefle/config/{ this.feature.path } target=_blank> <i class="icon">edit</i></a></h3> -->
    <ul>
David Foucher's avatar
David Foucher committed
9
        <li each={ this.active }><h4>{ name } <a href=https://framagit.org/ybon/trefle/tree/master/{ filename }#L{ line } target=_blank><i class=icon>edit</i></a></h4>
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
        <rule content={ raw }></rule>
        <!-- <pre><div each={ steps }>{ keyword } { name }</div></pre> -->
      </li>
    </ul>
  </div>
  <div if={ !this.selected_filters.length }>
    <p>Sélectionner au moins une catégorie dans le menu.</p>
  </div>

  <script>
    this.data = []
    this.active = []
    this.selected_filters = []
      this.filters = []

    this.on('mount', () => this.load())

    this.load_data = (data) => {
Yohan Boniface's avatar
Yohan Boniface committed
28
      SCENARIOS = data
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
      this.data = data
      if (this.opts.filters) {
        this.selected_filters = this.opts.filters
        this.active = []
      }
      main: for (var i = 0, scenario; i < this.data.length; i++) {
        scenario = this.data[i]
        for (var j = 0; j < this.selected_filters.length; j++) {
          if (scenario.tags.indexOf(this.selected_filters[j]) === -1) continue main;
        }
        for (var j = 0; j < scenario.tags.length; j++) {
          if (this.filters.indexOf(scenario.tags[j]) === -1) this.filters.push(scenario.tags[j])
        }
        this.active.push(scenario)
      }
      this.filters.sort((a, b) => a.localeCompare(b))
      this.update()
    }

    this.toggle = (e) => {
      var index = this.selected_filters.indexOf(e.item.filter)
      if (index > -1) this.selected_filters.splice(index, 1)
      else this.selected_filters.push(e.item.filter)
      e.preventDefault()
      route(`scenarios/${this.selected_filters.join(',')}`)
    }

    this.load = () => {
Yohan Boniface's avatar
Yohan Boniface committed
57
      if (SCENARIOS) return this.load_data(SCENARIOS)
58
      request('../explore/scenarios')
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
      .then(this.load_data)
    }

    this.mixin(View)
  </script>

  <style scoped>
    :scope.tools {
      min-width: 1200px;
      grid-template-columns: 1fr 4fr;
    }
    h3 {
      font-variant: small-caps;
    }
  </style>

</scenarios>