vue.js + double clustering

css/main.css

@@ -305,3 +305,15 @@ h3 {
 #sentence-txt {
 	margin-top: 0pt;
 }
+
+#whether-input1 + .CodeMirror {
+	height: 60px;
+}
+
+#whether-input2 + .CodeMirror {
+	height: 60px;
+}
+
+#pattern-input + .CodeMirror {
+	height: 160px;
+}
\ No newline at end of file

js/main.js

@@ -183,6 +183,16 @@ function init() {
     lineNumbers: true,
   });
 
+  // Initialise CodeMirror
+  xxx = CodeMirror.fromTextArea(document.getElementById("whether-input1"), {
+    lineNumbers: true,
+  });
+
+  // Initialise CodeMirror
+  yyy = CodeMirror.fromTextArea(document.getElementById("whether-input2"), {
+    lineNumbers: true,
+  });
+
   init_navbar();
 
   deal_with_get_parameters();
@@ -416,6 +426,7 @@ function next_results() {
 
 // ==================================================================================
 function search_pattern() {
+  console.log("+++");
   $('#results-block').hide();
   $('#cluster-block').hide();
   $('#results-list').empty();
@@ -437,7 +448,9 @@ function search_pattern() {
   };
   if ($('#cluster-box').prop('checked')) {
     data['cluster'] = $('#cluster-key').val();
+    data['whether'] = false;
   }
+  console.log(data);
   $.ajax({
     url: 'main.php',
     dataType: 'text',
@@ -1176,4 +1189,6 @@ function levenshtein(a, b) {
     t = u;
   }
   return u[n];
-}
\ No newline at end of file
+}
+
+

js/vue.js

+var app = new Vue({
+  el: '#app',
+  data: {
+    clust1: "no", // 3 possible values: no, key or whether
+    clust2: "no", // 3 possible values: no, key or whether
+  },
+});
\ No newline at end of file

run.html

@@ -20,6 +20,7 @@
 	<link rel="stylesheet" href="vendor/bootflat.css">
 
 	<script src="vendor/jquery-2.1.1.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
 	<!-- tooltipter -->
 	<link rel="stylesheet" href="vendor/tooltipter/tooltipster.css">
@@ -131,6 +132,34 @@
 									</a>
 									for more info.
 								</h4>
+
+
+								<div id="app">
+									<div>
+										<b>Clustering 1:</b>
+										<input type="radio" value="no" v-model="clust1"><label>No</label>
+										<input type="radio" value="key" v-model="clust1"><label>Key</label>
+										<input type="radio" value="whether" v-model="clust1"><label>Whether</label>
+									</div>
+									<input v-show="clust1=='key'" type="entry" id="clust1-key" />
+									<div v-show="clust1=='whether'" >
+										<textarea id="whether-input1"></textarea>
+									</div>
+
+									<div v-show="clust1 != 'no'">
+										<div>
+											<b>Clustering 2:</b>
+											<input type="radio" value="no" v-model="clust2"><label>No</label>
+											<input type="radio" value="key" v-model="clust2"><label>Key</label>
+											<input type="radio" value="whether" v-model="clust2"><label>Whether</label>
+										</div>
+										<input v-show="clust2=='key'" type="entry" id="clust2-key" />
+										<div v-show="clust2=='whether'">
+											<textarea id="whether-input2"></textarea>
+										</div>
+									</div>
+								</div>
+
 								<p>
 									<label id="lemma-option">
 										<input type="checkbox" id="lemma-box" checked> lemma
@@ -383,6 +412,7 @@
 		</div>
 	</div>
 
+	<script src="js/vue.js"></script>
 
 </body>