Scenarios.vue 7.71 KB
Newer Older
1
<template>
2
  <div id="Scenarios">
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
    <div id="scenarios-main-div">
      <div v-if="!this.isLoading">
        <div class="container ml-5 mr-2">
          <div class="row">
            <div :class="classCollapsedMenu">
              <div class="mb-3 pull-right">
                <button @click="collapsed = !collapsed" type="button" class="btn main-button mb-5">
                  <span v-show="collapsed"><span class="chevron-toggle">&#8594;</span>  Ouvrir le panneau</span>
                  <span v-show="!collapsed"><span class="chevron-toggle">&#8592;</span>  Fermer le panneau</span>
                </button>
              </div>
              <div v-show="!collapsed">
                <h2 class="mb-5">Scénarios</h2>
                <ul>
                  <li v-for="(filter, id) in filterList" :key="id">
18
                    <a :href="'#'+selected_filters.join(',')" :class="{selected: filters[filter].selected}" @click="setFilter(filter);">
19 20 21 22 23 24 25 26 27 28 29
                      {{ filter.charAt(0).toUpperCase() + filter.slice(1) }}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div v-show="!collapsed" :class="classCollapsedSeparator">
              <hr class="referentiel-vertical-separator">
            </div>
            <div :class="classCollapsedContent">
              <div v-if="this.show">
30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
                <div v-if="this.activeScenarios.length > 0">
                  <ul>
                    <li v-for="(scenario, id) in this.activeScenarios" :key="id">
                      <h4>
                        {{ scenario.name.toUpperCase() }}
                        <!--<a :href="'https://framagit.org/ybon/trefle/tree/master/'+scenario.filename+'#L'+scenario.line" target=_blank>
                          <i class=icon>edit</i>
                        </a>-->
                      </h4>
                      <pre v-html="transform(scenario.raw)"/>
                      <br><br>
                    </li>
                  </ul>
                </div>
                <div v-else>
                  <h4 class="mt-5">Veuillez sélectionner au moins une catégorie</h4>
                </div>
47 48 49 50 51
              </div>
              <div v-else>
                <h2>Sélectionnez une catégorie dans le menu.</h2>
              </div>
            </div>
52 53 54
          </div>
        </div>
      </div>
55 56 57
      <div v-else class="text-center loading-gif">
        <img src="./../assets/images/loading.gif" alt="loading...">
      </div>
58 59
    </div>
  </div>
60 61
</template>
<script>
David Foucher's avatar
David Foucher committed
62
  export default {
63 64 65 66 67 68 69
    name: 'Scenarios',
    data: function () {
      return {
        scenarios: {},
        active: [],
        selected_filters: [],
        filters: [],
70
        toggled: "",
71 72
        collapsed: false,
        isLoading: true,
73 74
      }
    },
75
    computed: {
76 77 78
      show: function () {
        return (this.nbSelected !== '')
      },
79 80 81 82 83 84 85 86 87 88
      activeScenarios: function () {
        var activeScenarios = [];
        var scenarios = this.scenarios;
        if(this.selected_filters.length > 0) {
          for (var i=0; i < scenarios.length; i++) {
            var scenario = scenarios[i];
            if(this.selected_filters.every(function(current_filter) {
              return (scenario.tags.find(scenario_tag => scenario_tag == current_filter) != undefined)
            })) activeScenarios.push(scenario);
          }
89
        }
90
        return activeScenarios;
91 92 93
      },
      filterList: function(){
        var filterList = []
94
        var scenarios = this.activeScenarios
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
        Object.values(this.filters).forEach(function(filter){
          if(filter.selected){
            scenarios.forEach(function(scenario){
              if(scenario.tags.indexOf(filter.tag) > -1){
                scenario.tags.forEach(function(tag){
                  if(filterList.indexOf(tag) === -1){
                    filterList.push(tag)
                  }
                })
              }
            })
          }
        });
        if(filterList.length === 0) filterList = Object.keys(this.filters)
        filterList.sort((a, b) => a.localeCompare(b))
        return filterList
      },
      selectedItem: function(){
        var itemList = Object.values(this.filters).reduce(function(selected, item){ if(item.selected && selected.indexOf(item.tag) === -1) selected.push(item); return selected }, []);
        if(itemList.length === 0)
          itemList = this.filters
        return itemList;
      },
      nbSelected: function(){
        return Object.values(this.selectedItem).reduce(function(cnt, item){ if(item.selected) cnt=cnt+1; return cnt},0);
120 121 122 123 124 125 126 127 128 129 130 131 132
      },
      classCollapsedContent: function () {
        if(this.collapsed) return "col-md-12 col-sm-12 col-xs-12";
        return "col-md-8 col-sm-12 col-xs-12";
      },
      classCollapsedMenu: function () {
        if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
        return "col-md-3 col-sm-12 col-xs-12";
      },
      classCollapsedSeparator: function () {
        if(this.collapsed) return "col-md-0 col-sm-0 col-xs-0";
        return "col-md-1 col-sm-0 col-xs-0";
      },
133 134 135
    },
    created: function () {
      this.load();
136
      if(decodeURI(window.location.hash) != "") this.selected_filters = decodeURI(window.location.hash).split('#')[1].split(',');
137 138 139 140
    },
    methods: {
      load: function () {
        this.$http.get('/explore/scenarios').then(response => {
141 142 143 144 145 146 147 148 149 150 151 152 153 154
          this.scenarios = response.body
          this.isLoading = false;
          if(this.filters) {
            this.active = []
          }

          for (var i = 0, scenario; i < this.scenarios.length; i++) {
            scenario = this.scenarios[i]
            if (scenario.tags.length>0) {
              for (var k = 0; k < scenario.tags.length; k++) {
                if (this.filters.indexOf(scenario.tags[k]) === -1)
                {
                  var isSelected=(this.selected_filters.indexOf(scenario.tags[k]) > -1)
                  this.filters.push({tag:scenario.tags[k], selected:isSelected})
155 156 157
                }
              }
            }
158 159 160 161
            this.active.push(scenario)
          }
          this.filters.sort((a, b) => a.tag.localeCompare(b.tag))
          this.filters = this.filters.reduce(function(filters, item){ filters[item.tag]=item; return filters }, {})
162 163
        }).created;
      },
164 165 166 167 168
      setFilter: function (filter) {
        var index = this.selected_filters.indexOf(filter)
        if (index > -1) this.selected_filters.splice(index, 1)
        else this.selected_filters.push(filter)

169
        this.filters[filter].selected = !this.filters[filter].selected
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
      },
      transform: function(data) {
        return data
          .replace(/Si /g, '<span class="bold text-dark">Si </span>')
          .replace(/Soit /g, '<span class="bold text-dark">Soit </span>')
          .replace(/Quand /g, '<span class="bold text-dark">Quand </span>')
          .replace(/Scénario: /g, '<span class="bold text-dark">Scénario: </span>')
          .replace(/Ou /g, '<span class="bold text-dark">Ou </span>')
          .replace(/, ou /g, '<span class="bold text-dark">, ou </span>')
          .replace(/Et /g, '<span class="bold text-dark">Et </span>')
          .replace(/, et /g, '<span class="bold text-dark">, et </span>')
          .replace(/Alors /g, '<span class="bold text-dark">Alors </span>')
          .replace(/(#.+)/g, "<em class=\"comment\">$1</em>")
          .replace(/appliquer les règles «([^»]+?)(.rules)?»/g, 'appliquer les règles « <a href="'+this.rulePath+'#$1.rules" class="btn main-button" title="Ouvrir les règles" style="display:inline-block">$1</a> »')
          .replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
          .replace(/,([^ ])/g, ", $1");
      },
187
    },
David Foucher's avatar
David Foucher committed
188 189
  }
</script>
190 191 192 193 194 195 196 197 198

<style scoped>
  #scenarios-main-div {
    padding-top: 3rem;
  }
  .selected {
    font-weight: bold;
  }
</style>