Warning, /EICrecon/docs/table_flags/flags_view.md is written in an unsupported language. File is not indexed.
0001 <script>
0002 new Vue({
0003 el: '#example_vue',
0004 // Options...
0005 data() {
0006 return {
0007 flags: [],
0008 recoPrefixes: [],
0009 showFlags: false,
0010 showDefaultValue: false,
0011 // showUserValue: true,
0012 showDescription: true,
0013 // showDiff: false,
0014 showRecoOnly: false,
0015 }
0016 },
0017 mounted() {
0018 this.showRecoOnly = (localStorage.getItem("showRecoOnly") ?? "false") === "true";
0019 this.showFlags = (localStorage.getItem("showFlags") ?? "false") === "true";
0020 this.showDefaultValue = (localStorage.getItem("showDefaultValue") ?? "false") === "true";
0021 // this.showUserValue = (localStorage.getItem("showUserValue") ?? "true") === "true";
0022 this.showDescription = (localStorage.getItem("showDescription") ?? "true") === "true";
0023 // this.showDiff = (localStorage.getItem("showDiff") ?? "false") === "true";
0024 },
0025 // watch: {
0026 // showDiff(value) {
0027 // localStorage.setItem("showDiff", value);
0028 // if(value) {
0029 // this.showDefaultValue = true;
0030 // this.showUserValue = true;
0031 // this.showDescription = false;
0032 // }
0033 // },
0034 // showRecoOnly(newValue, oldValue) { localStorage.setItem("showRecoOnly", newValue); },
0035 // showFlags(newValue, oldValue) { localStorage.setItem("showFlags", newValue); },
0036 // showDefaultValue(newValue, oldValue) { localStorage.setItem("showDefaultValue", newValue); },
0037 // showUserValue(newValue, oldValue) { localStorage.setItem("showUserValue", newValue); },
0038 // showDescription(newValue, oldValue) { localStorage.setItem("showDescription", newValue); },
0039 //
0040 // },
0041
0042 created() {
0043 // Read json flags
0044 fetch('arches_flags.json')
0045 .then(response => response.json())
0046 .then(data => (this.flags = data))
0047 .catch(err => console.log(err));
0048 // Define reconstruction flags prefixes
0049 this.recoPrefixes = [
0050 "B0ECAL",
0051 "B0TRK",
0052 "BEMC",
0053 "BTOF",
0054 "BTRK",
0055 "BVTX",
0056 "ECTOF",
0057 "ECTRK",
0058 "EEMC",
0059 "FOFFMTRK",
0060 "HCAL",
0061 "MPGD",
0062 "RICH",
0063 "RPOTS",
0064 "ZDC",
0065 "Tracking",
0066 "Reco",
0067 "Digi",
0068 "Calorimetry"
0069 ];
0070 },
0071 computed: {
0072 filteredFlags() {
0073 let prefixes = this.recoPrefixes;
0074 return this.flags.filter(el => {
0075 // if(this.showDiff) {
0076 //
0077 // if(el[0] === "B0ECAL:B0ECalClusters:depthCorrection") {
0078 // console.log(el[0]);
0079 // console.log(el[1]);
0080 // console.log(el[2]);
0081 // }
0082 //
0083 // if(el[1].toUpperCase() === el[2].toUpperCase()) {
0084 // return false;
0085 // }
0086 // }
0087
0088 if(!this.showRecoOnly) {
0089 return true; // We are not filtering and return everything
0090 }
0091
0092 for (let prefix of prefixes) {
0093 if (el[0].toUpperCase().startsWith(prefix.toUpperCase())) {
0094 return true;
0095 }
0096 }
0097 return false;
0098 });
0099 },
0100 },
0101 filters: {
0102 cutLongLines: function (value) {
0103 if(value.length > 50) {
0104 return value.slice(0,50) + "...";
0105 }
0106 return value;
0107 }
0108 }
0109 });
0110 </script>
0111
0112 <div id="example_vue">
0113 <div class="radio_btn_name">
0114 <div>Reconstruction only</div>
0115 <div>Show default value</div>
0116 <div>Show description</div>
0117 </div>
0118 <div class="radio_btn">
0119 <div class="toggleWrapper">
0120 <input type="checkbox" name="toggle1" class="mobileToggle" id="toggle1" v-model="showRecoOnly">
0121 <label for="toggle1"></label>
0122 </div>
0123 <div class="toggleWrapper">
0124 <input type="checkbox" name="toggle2" class="mobileToggle" id="toggle2" v-model="showDefaultValue">
0125 <label for="toggle2"></label>
0126 </div>
0127 <div class="toggleWrapper">
0128 <input type="checkbox" name="toggle4" class="mobileToggle" id="toggle4" v-model="showDescription">
0129 <label for="toggle4"></label>
0130 </div>
0131 </div>
0132 <input type="text" id="myInput" onkeyup="filterTableRowsByInput('myInput', ['table_flags'])" placeholder="Search for flags..">
0133 <table class="table_flags">
0134 <thead>
0135 <tr>
0136 <th v-if="!showFlags">Flag name</th>
0137 <th v-if="showDefaultValue">Default value</th>
0138 <th v-if="showDescription">Description</th>
0139 </tr>
0140 </thead>
0141 <tbody>
0142 <tr v-for="flag in filteredFlags" v-bind:title="flag[3]">
0143 <td >{{ flag[0] }}</td>
0144 <td v-if="showDefaultValue" v-bind:title="flag[1]">{{ flag[1] | cutLongLines }}</td>
0145 <td v-if="showDescription" v-bind:title="flag[3]">{{ flag[3] }}</td>
0146 </tr>
0147 </tbody>
0148 </table>
0149 </div>
