ajout exo tp5

R4.01_R4.A.10/td_tp/tp5/src/ex2/app.riot

@@ -0,0 +1,62 @@
+<app>
+<h2>{ props.title }</h2>
+<div id="radar">
+
+	<!-- Use the component -->
+
+	<svg 
+	 is="polygraph"
+     stats={ state.stats } />
+
+
+		<!-- controls -->
+
+		<div>
+		<div each={ (stat, index) in state.stats }>
+		 <label>{ stat.label }</label>
+		  <input type="range"
+		  onchange={ changeValue }
+		  min="0"
+	      max="100"
+          data-index={ index }
+          value={ stat.value }>
+		<span>{ stat.value }</span>
+		<button onclick={ remove } class="remove" value={ index }>X</button>
+		</div>
+
+		<!-- add item -->
+		<form id="add">
+		<input type="text"
+		  name="newlabel"
+	      value={ state.newLabel }
+	      oninput={ inputStat }>
+		<button onclick={ add }>Add a Stat</button>
+		</form>
+		</div>
+</div>
+
+<script>
+	export default {
+		state: {
+			newLabel: '',
+			stats: []
+		},
+		onBeforeMount(props, state) {
+			state.stats = props.stats
+		},
+		add(e) {
+			// TODO
+				},
+		remove(stat) {
+			// TODO
+		},
+		inputStat(e) {
+			this.state.newLabel = e.target.value
+		},
+		changeValue(e) {
+			this.state.stats[e.target.dataset.index].value = e.target.value
+			this.update()
+		}
+	}
+</script>
+</app>