|
|
@@ -1,123 +1,89 @@
|
|
|
-var category_list = [];
|
|
|
-var project_list = [];
|
|
|
-var type_list = [];
|
|
|
-var notes_list = [];
|
|
|
+var db_table = {};
|
|
|
|
|
|
$.ajax({
|
|
|
- url: "./script/php/get_category_list.php",
|
|
|
+ url: "./script/php/get_db_table.php",
|
|
|
type: "GET",
|
|
|
async: false,
|
|
|
contentType: "application/json",
|
|
|
dataType: "json"
|
|
|
}).done(function(data) {
|
|
|
- category_list = data;
|
|
|
+ db_table = data;
|
|
|
}).error(function(error) {
|
|
|
console.log(error);
|
|
|
});
|
|
|
|
|
|
-var category_id_list = get_object_value_to_list(category_list, 'category_id');
|
|
|
+db_table["notes"] = merge_object_by_key(db_table["notes"], "project_id", "notes");
|
|
|
+var notes_button_list = [...new Set([].concat(...Object.values(db_table["notes"])))];
|
|
|
|
|
|
-$.ajax({
|
|
|
- url: "./script/php/get_project_list.php",
|
|
|
- data: {
|
|
|
- category_id: category_id_list,
|
|
|
- },
|
|
|
- type: "GET",
|
|
|
- async: false,
|
|
|
- contentType: "application/json",
|
|
|
- dataType: "json"
|
|
|
-}).done(function(data) {
|
|
|
- project_list = data;
|
|
|
-}).error(function(error) {
|
|
|
- console.log(error);
|
|
|
-});
|
|
|
-
|
|
|
-$.ajax({
|
|
|
- url: "./script/php/get_type_list.php",
|
|
|
- type: "GET",
|
|
|
- async: false,
|
|
|
- contentType: "application/json",
|
|
|
- dataType: "json"
|
|
|
-}).done(function(data) {
|
|
|
- type_list = data;
|
|
|
-}).error(function(error) {
|
|
|
- console.log(error);
|
|
|
-});
|
|
|
-
|
|
|
-$.ajax({
|
|
|
- url: "./script/php/get_notes_list.php",
|
|
|
- type: "GET",
|
|
|
- async: false,
|
|
|
- contentType: "application/json",
|
|
|
- dataType: "json"
|
|
|
-}).done(function(data) {
|
|
|
- notes_list = data;
|
|
|
-}).error(function(error) {
|
|
|
- console.log(error);
|
|
|
-});
|
|
|
-
|
|
|
-notes_list = merge_object_by_key(notes_list, "project_id", "notes");
|
|
|
-var notes_button_list = new Set([].concat(...Object.values(notes_list)));
|
|
|
+var search_data = {
|
|
|
+ "category": db_table["category"],
|
|
|
+ "project": db_table["project"],
|
|
|
+ "type": db_table["type"],
|
|
|
+ "notes": notes_button_list
|
|
|
+};
|
|
|
+var project_check = [];
|
|
|
|
|
|
const vm = Vue.createApp({});
|
|
|
|
|
|
vm.component('search-block', {
|
|
|
data() {
|
|
|
return {
|
|
|
- category_list: category_list,
|
|
|
- project_list: project_list,
|
|
|
- type_list: type_list,
|
|
|
+ category_list: db_table["category"],
|
|
|
+ project_list: db_table["project"],
|
|
|
+ type_list: db_table["type"],
|
|
|
notes_button_list: notes_button_list
|
|
|
}
|
|
|
},
|
|
|
template: `<section class="panel">
|
|
|
<div class="panel-body">
|
|
|
- <div class="ui-group category_button">
|
|
|
- <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="category">
|
|
|
- <li style="padding: 10px 15px;">
|
|
|
- <label>工程類別:</label>
|
|
|
- </li>
|
|
|
- <li class="any active">
|
|
|
- <a class="button" data-filter="">any</a>
|
|
|
- </li>
|
|
|
- <filter-button v-for="item in category_list" v-bind:object="item.category_name"></filter-button>
|
|
|
- </ul>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="ui-group project_button">
|
|
|
- <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="project">
|
|
|
- <li style="padding: 10px 15px;">
|
|
|
- <label>專案類別:</label>
|
|
|
- </li>
|
|
|
- <li class="any active">
|
|
|
- <a class="button" data-filter="">any</a>
|
|
|
- </li>
|
|
|
- <filter-project-button v-for="item in project_list" v-bind:object="item"></filter-project-button>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <ul class="button-group nav nav-pills nav-pills-primary">
|
|
|
+ <li style="padding: 10px 15px;">
|
|
|
+ <label>工程類別:</label>
|
|
|
+ </li>
|
|
|
+ <select id="category_button" onchange="category_onchange(this)">
|
|
|
+ <option>any</option>
|
|
|
+ <category-button v-for="item in category_list" v-bind:object="item"></category-button>
|
|
|
+ </select>
|
|
|
+ </ul>
|
|
|
|
|
|
- <div class="ui-group type_button">
|
|
|
- <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="type">
|
|
|
+ <ul class="button-group nav nav-pills nav-pills-primary">
|
|
|
+ <li style="padding: 10px 15px;">
|
|
|
+ <label >專案類別:</label>
|
|
|
+ </li>
|
|
|
+ <div class="multiselect">
|
|
|
+ <div class="selectBox" onclick="showCheckboxes()">
|
|
|
+ <select id="p-select">
|
|
|
+ <option>選擇專案</option>
|
|
|
+ </select>
|
|
|
+ <div class="overSelect"></div>
|
|
|
+ </div>
|
|
|
+ <div id="checkboxes" class="form-inline">
|
|
|
+ <project-button v-for="item in project_list" :object="item"></project-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <div id="type" hidden>
|
|
|
+ <ul class="button-group nav nav-pills nav-pills-primary">
|
|
|
<li style="padding: 10px 15px;">
|
|
|
<label>文件類別:</label>
|
|
|
</li>
|
|
|
- <li class="any active">
|
|
|
- <a class="button" data-filter="">any</a>
|
|
|
- </li>
|
|
|
- <filter-button v-for="item in type_list" v-bind:object="item.type_name"></filter-button>
|
|
|
+ <select id="type_button" onchange="type_onchange(this)">
|
|
|
+ <option value="any">any</option>
|
|
|
+ <type-button v-for="item in type_list" v-bind:object="item"></type-button>
|
|
|
+ </select>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div class="ui-group notes_button" hidden>
|
|
|
- <ul class="button-group nav nav-pills nav-pills-primary" data-filter-group="notes">
|
|
|
+ <div id="notes" hidden>
|
|
|
+ <ul class="button-group nav nav-pills nav-pills-primary">
|
|
|
<li style="padding: 10px 15px;">
|
|
|
<label>設計圖類別:</label>
|
|
|
</li>
|
|
|
- <li class="any active">
|
|
|
- <a class="button" data-filter="">any</a>
|
|
|
- </li>
|
|
|
- <filter-notes-button v-for="item in notes_button_list" v-bind:object="item"></filter-notes-button>
|
|
|
+ <select id="notes-button" onchange="notes_onchange(this)">
|
|
|
+ <option value="any">any</option>
|
|
|
+ <notes-button v-for="item in notes_button_list" v-bind:object="item"></notes-button>
|
|
|
+ </select>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="filter-search-bar">
|
|
|
@@ -129,53 +95,168 @@ vm.component('search-block', {
|
|
|
</section>`
|
|
|
});
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-vm.component('filter-button', {
|
|
|
- template: `<li><a v-bind:class="addClass" v-bind:data-filter=this.object>{{object}}</a></li>`,
|
|
|
+vm.component('category-button', {
|
|
|
+ template: `<option v-bind:value="concat">{{object.category_name}}</option>`,
|
|
|
props: {
|
|
|
- object: String
|
|
|
+ object: {
|
|
|
+ category_name: String,
|
|
|
+ category_id: String,
|
|
|
+ list_id: String
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
- addClass() {
|
|
|
- if(this.object=="設計圖"){
|
|
|
- return "button blueprint";
|
|
|
+ concat(){
|
|
|
+ return this.object.category_id + ','+ this.object.list_id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+vm.component('project-button', {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ project_check: project_check
|
|
|
+ }
|
|
|
+ },
|
|
|
+ template: `<label class="project-button" v-bind:for="concat">
|
|
|
+ <input type="checkbox" class="checkbox" :value=object.project_id
|
|
|
+ :id="concat" @change="changeText"/>{{object.project_name}}
|
|
|
+ </label>`,
|
|
|
+ props: {
|
|
|
+ object: {
|
|
|
+ project_id: String,
|
|
|
+ project_name: String,
|
|
|
+ category_id: String
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeText(event) {
|
|
|
+ if(event.target.checked) {
|
|
|
+ project_check.push(this.object.project_id);
|
|
|
+ $("#p-select option").text(project_check);
|
|
|
} else {
|
|
|
- return "button";
|
|
|
+ project_check.splice(project_check.indexOf(this.object.project_id), 1);
|
|
|
+ $("#p-select option").text(project_check);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!project_check.length){
|
|
|
+ $("#p-select option").text("未選擇任何專案");
|
|
|
}
|
|
|
+
|
|
|
+ $("#notes").slideUp(200);
|
|
|
+ document.getElementById('notes-button').value="any";
|
|
|
+ document.getElementById('type_button').value="any";
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ concat(){
|
|
|
+ return 'project'+ this.object.project_id;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
});
|
|
|
|
|
|
-vm.component('filter-project-button', {
|
|
|
- template: `<li><a v-bind:class="addClass" v-bind:data-filter=this.object.project_id>{{object.project_name}}</a></li>`,
|
|
|
+vm.component('type-button', {
|
|
|
+ template: `<option :value=object.type_id>{{object.type_name}}</option>`,
|
|
|
props: {
|
|
|
object: {
|
|
|
- category_name: String,
|
|
|
- project_id: String,
|
|
|
- project_name: String
|
|
|
+ type_id: String,
|
|
|
+ type_name: String,
|
|
|
+ filetype_id: String
|
|
|
},
|
|
|
- },
|
|
|
- computed: {
|
|
|
- addClass() {
|
|
|
- return "button project " + this.object.category_name;
|
|
|
- }
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-vm.component('filter-notes-button', {
|
|
|
- template: `<li><a v-bind:class="addClass" v-bind:data-filter=this.object>{{object}}</a></li>`,
|
|
|
+
|
|
|
+vm.component('notes-button', {
|
|
|
+ template: `<option v-bind:value=object>{{object}}</option>`,
|
|
|
props: {
|
|
|
object: String
|
|
|
- },
|
|
|
- computed: {
|
|
|
- addClass() {
|
|
|
- return "button notes " + this.object;
|
|
|
- }
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+function category_onchange(obj) {
|
|
|
+ var category_id = obj.value.split(',')[0];
|
|
|
+ var list_id = obj.value.split(',')[1];
|
|
|
+
|
|
|
+ if(category_id == "any") {
|
|
|
+ search_data["project"] = db_table["project"];
|
|
|
+ search_data["type"] = db_table["type"];
|
|
|
+
|
|
|
+ $("#type").slideUp(200);
|
|
|
+ } else {
|
|
|
+ search_data["project"] = get_list_by_key(db_table["project"], "category_id", [category_id]);
|
|
|
+ if(search_data["project"].length) {
|
|
|
+ $("#p-select option").text("選擇專案");
|
|
|
+ project_id_list = string_concat_list("project", get_object_value_to_list(search_data["project"], "project_id"));
|
|
|
+ show_multi_checkbox("project-button", project_id_list);
|
|
|
+ $("#type").slideDown(200);
|
|
|
+ } else {
|
|
|
+ $("#p-select option").text("無符合條件選項");
|
|
|
+ $("#p-select option").disabled = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ target_type_id_list = get_list_by_key(db_table["category_type"], "list_id", [list_id]);
|
|
|
+ target_type_id = merge_obj_list_value(target_type_id_list, "category_list").split(",");
|
|
|
+ search_data["type"] = get_list_by_key(db_table["type"], "type_id", target_type_id)
|
|
|
+ }
|
|
|
+ $("#notes").slideUp(200);
|
|
|
+ document.getElementById('notes-button').value="any";
|
|
|
+
|
|
|
+ type_id_list = get_object_value_to_list(search_data["type"], "type_id");
|
|
|
+ show_select_option("type_button", type_id_list);
|
|
|
+ document.getElementById('type_button').value="any";
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function type_onchange(obj) {
|
|
|
+ var type_id = obj.value;
|
|
|
+ var show_notes_list = [];
|
|
|
+ if(type_id == "3") {
|
|
|
+ project_id_list = get_multiselect_value("checkbox");
|
|
|
+ project_id_list.forEach(element => {
|
|
|
+ show_notes_list = show_notes_list.concat(db_table["notes"][element.split("project")[1]]);
|
|
|
+ });
|
|
|
+ show_notes_list = [...new Set(show_notes_list)];
|
|
|
+ show_select_option("notes-button", show_notes_list);
|
|
|
+ $("#notes").slideDown(200);
|
|
|
+ } else {
|
|
|
+ $("#notes").slideUp(200);
|
|
|
+ document.getElementById('notes-button').value="any";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function notes_onchange(obj) {
|
|
|
+ var notes_name = obj.value;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function get_value_list_by_key(obj_list, key, target_value) {
|
|
|
+ output_list = [];
|
|
|
+ obj_list.forEach(element => {
|
|
|
+ if(target_value.length) {
|
|
|
+ if(target_value.includes(element[key].toString())) {
|
|
|
+ output_list.push(element);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ output_list.push(element);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ output_list = [...new Set(output_list)];
|
|
|
+ return output_list;
|
|
|
+}
|
|
|
+
|
|
|
+function get_list_by_key(obj, key_name, value_list) {
|
|
|
+ output_list = [];
|
|
|
+ obj.forEach(element => {
|
|
|
+ if(value_list.includes(element[key_name].toString())) {
|
|
|
+ output_list.push(element)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ output_list = [...new Set(output_list)];
|
|
|
+ return output_list;
|
|
|
+}
|
|
|
+
|
|
|
function get_object_value_to_list(obj, key) {
|
|
|
value_list = [];
|
|
|
for(i=0; i<obj.length; i++){
|
|
|
@@ -197,13 +278,72 @@ function merge_object_by_key(obj, key, value) {
|
|
|
return output_object
|
|
|
}
|
|
|
|
|
|
-function get_list_by_given_value(given_value_list, detail_list, given_attribute, search_attribute) {
|
|
|
- search_list = [];
|
|
|
- given_value_list.forEach(function(given_value) {
|
|
|
- target = detail_list.filter(object => object[given_attribute] == given_value);
|
|
|
- target.forEach(function(x) {
|
|
|
- search_list.push(x[search_attribute]);
|
|
|
- });
|
|
|
+function merge_obj_list_value(obj_list, key) {
|
|
|
+ output = "";
|
|
|
+ obj_list.forEach(element => {
|
|
|
+ output = output.concat(element[key]);
|
|
|
});
|
|
|
- return search_list;
|
|
|
-}
|
|
|
+ return output;
|
|
|
+}
|
|
|
+
|
|
|
+function string_concat_list(name, target_list) {
|
|
|
+ output_list = [];
|
|
|
+ target_list.forEach(element => {
|
|
|
+ output_list.push(name + element);
|
|
|
+ });
|
|
|
+ return output_list;
|
|
|
+}
|
|
|
+
|
|
|
+var expanded = false;
|
|
|
+function showCheckboxes() {
|
|
|
+ var checkboxes = document.getElementById("checkboxes");
|
|
|
+ if (!expanded) {
|
|
|
+ checkboxes.style.display = "block";
|
|
|
+ expanded = true;
|
|
|
+ } else {
|
|
|
+ checkboxes.style.display = "none";
|
|
|
+ expanded = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function show_multi_checkbox(class_name, show_list) {
|
|
|
+ //initial checkbox to uncheck
|
|
|
+ var init_checkboxes = document.getElementsByClassName("checkbox");
|
|
|
+ for (var x = 0; x < init_checkboxes.length; x++) {
|
|
|
+
|
|
|
+ init_checkboxes[x].checked = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ //hide all option
|
|
|
+ var checkboxes = document.getElementsByClassName(class_name);
|
|
|
+ if (checkboxes) {
|
|
|
+ for (var x = 0; x < checkboxes.length; x++) {
|
|
|
+ checkboxes[x].style.display = 'none';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //show target option
|
|
|
+ show_list.forEach(element => {
|
|
|
+ document.getElementById(element).parentElement.style.display = 'block';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function show_select_option(select_id, show_list) {
|
|
|
+ $("#"+select_id+" option").hide();
|
|
|
+
|
|
|
+ $("#"+select_id+" option[value=any]").show();
|
|
|
+ show_list.forEach(element => {
|
|
|
+ $("#"+select_id+" option[value=" + element + "]").show();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function get_multiselect_value(checkbox_class){
|
|
|
+ output = [];
|
|
|
+ var checkboxes = document.getElementsByClassName(checkbox_class);
|
|
|
+ for (var x = 0; x < checkboxes.length; x++) {
|
|
|
+ if(checkboxes[x].checked) {
|
|
|
+ output.push(checkboxes[x].id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return output;
|
|
|
+}
|
