Commit fe6ee830 authored by Lucas Détré's avatar Lucas Détré

changing rule's appearance and passing rule's related content into Rule component

parent f11cbe5c
Pipeline #2065 failed with stage
in 1 minute
......@@ -19,9 +19,7 @@
</div>
<div class="col-md-7">
<div v-if="this.show">
<h2> {{ this.ruleToShow.name.toUpperCase() }}</h2>
<br>
<pre>{{ this.ruleToShow.data }}</pre>
<Rule v-bind:data="this.ruleToShow.data" v-bind:name="this.ruleToShow.name" />
</div>
<div v-else>
<h2>Sélectionnez une règle.</h2>
......@@ -39,11 +37,13 @@
</template>
<script>
import RulesMenu from './RulesMenu.vue'
import Rule from './Rule.vue'
export default {
name: 'Referentiel',
components: {
RulesMenu
RulesMenu,
Rule
},
methods: {
load: function () {
......@@ -79,13 +79,6 @@
}
</script>
<style>
:scope.tools {
min-width: 1200px;
grid-template-columns: 1fr 4fr;
}
h3 {
font-variant: small-caps;
}
#referentiel-main-row {
padding-top: 3rem;
}
......
<template>
<div id="Rule"></div>
<div id="Rule">
<h2> {{ this.name.toUpperCase() }}</h2>
<br>
<pre v-html="transform(this.data)"/>
</div>
</template>
<script>
export default {
name: 'Rule'
name: 'Rule',
props: ['name', 'data'],
methods: {
transform: function(data) {
return data.replace(/Si /g, '<strong>Si </strong>')
.replace(/Soit /g, '<strong>Soit </strong>')
.replace(/Quand /g, '<strong>Quand </strong>')
.replace(/Scénario: /g, '<strong>Scénario: </strong>')
.replace(/Ou /g, '<strong>Ou </strong>')
.replace(/, ou /g, '<strong>, ou </strong>')
.replace(/Et /g, '<strong>Et </strong>')
.replace(/, et /g, '<strong>, et </strong>')
.replace(/Alors /g, '<strong>Alors </strong>')
.replace(/(#.+)/g, "<em class=\"comment\">$1</em>")
.replace(/appliquer les règles «([^»]+?)(.rules)?»/g, 'appliquer les règles «<a href="#$1.rules" title="Ouvrir les règles"><i class="icon">arrow_forward</i> $1</a>»')
.replace(/(«.+»)/g, "<span class=\"string\">$1</span>")
.replace(/,([^ ])/g, ", $1");
}
}
}
</script>
<style scoped>
pre strong {
font-family: 'mono';
font-weight: bold;
}
pre .comment {
font-family: 'mono';
font-style: italic;
color: #666;
}
pre .keyword {
font-family: 'mono';
font-weight: 600;
}
pre .constant {
font-family: 'mono';
font-weight: 600;
text-decoration: underline dotted;
cursor: help;
}
pre a,
pre .string,
pre .number {
font-family: 'mono';
font-weight: 600;
}
pre code {
display: block;
padding-left: 1em;
font-family: mono;
}
a.line {
display: none;