SimulateurContext.vue 2.2 KB
Newer Older
1 2
<template>
  <div id="SimulateurContext">
3 4 5 6 7 8 9 10
    <br>
    <label for="filterContext">
      <strong>
        Filtrer les entrées du tableau :
      </strong>
    </label>
    <br>
    <input class="form-control" type="text" id="filterContext" name="filterContext" v-model="filterContext" placeholder="Filtre..."/>
11 12 13 14 15 16 17 18 19 20
    <br>
    <table class="table-responsive table table-striped table-hover">
      <caption> Contexte de simulation </caption>
      <thead>
        <tr>
          <th>Nom</th>
          <th>Valeur</th>
        </tr>
      </thead>
      <tbody>
21
        <tr v-for="(value, key) in this.filteredContext" :key="key">
22 23 24 25 26 27 28 29 30
          <td> {{ renderLabel(key) }} </td>
          <td> {{ renderValue(key,value,schema[key]) }} </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  export default {
31
		name: 'SimulateurContext',
32 33 34
    props: ['schema', 'context',],
    data: function () {
      return {
35
        filterContext: "",
36 37 38 39 40 41 42 43 44 45 46 47 48
      }
    },
    methods: {
      renderValue: function (key, value, schema_tmp) {
        schema_tmp = schema_tmp || this.schema[key]
        if (schema_tmp['type'] === 'array') return value.map(v => this.renderValue(key, v, schema_tmp['items'])).join(', ')
        if (schema_tmp['type'] === "boolean") return value ? 'oui' : 'non'
        if (schema_tmp['format'] === 'date') return (new Date(value * 1000)).toLocaleDateString()
        if (schema_tmp['enum']) return schema_tmp === undefined ? schema_tmp['enum'][value]+' ('+value+')' : ''
        return value
      },
      renderLabel: function (key) {
        return this.schema[key]['label'].charAt(0).toUpperCase() + this.schema[key]['label'].slice(1)
49 50 51 52 53 54 55 56 57 58 59 60 61
      },
    },
    computed: {
      filteredContext : function () {
        if (this.filterContext == "") return this.context;
        else {
          return Object.keys(this.context)
            .filter(key => this.renderLabel(key).toLowerCase().includes(this.filterContext.toLowerCase()))
            .reduce((obj, key) => {
              obj[key] = this.context[key];
              return obj;
            }, {});
        }
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
      }
    }
  }
</script>

<style  scoped>

  td {
    width: 50%;
    max-width:50%;
  }

  table{
    width:100%;
    table-layout:fixed;
  }
</style>