Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

search.js 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. Vue.component('search',{
  2. template: `
  3. <form class="om-searchbar" @submit.prevent="search()">
  4. <b-field>
  5. <b-autocomplete
  6. v-model="searchtext"
  7. @keydown.native.enter="search"
  8. :data="filteredDataArray"
  9. placeholder="suche..."
  10. icon="magnify"
  11. @reset-searchtext="resetSearchtext($event)"
  12. @select="option => selected = option">
  13. </b-autocomplete>
  14. <button class="clearButton" @click="clear">x</button>
  15. </b-field>
  16. </form>`,
  17. data: function() {
  18. return {
  19. searchtext: "",
  20. selected: [],
  21. taglist: data,
  22. };
  23. },
  24. computed:{
  25. filteredDataArray: function() {
  26. return this.taglist.filter((option) => {
  27. return option
  28. .toString()
  29. .toLowerCase()
  30. .indexOf(this.searchtext.toLowerCase()) >= 0
  31. });
  32. },
  33. },
  34. methods: {
  35. resetSearchtext: function(param) {
  36. this.searchtext = param;
  37. },
  38. getFilteredTags: function(text) {
  39. this.taglist = data.filter((option) => {
  40. return option
  41. .toString()
  42. .toLowerCase()
  43. .indexOf(text.toLowerCase()) >= 0
  44. })
  45. this.search();
  46. },
  47. search: function() {
  48. var btnString = '';
  49. btnString = searching(this.searchtext, btnString);
  50. console.info(btnString);
  51. this.$emit('update-home-abo-button', btnString);
  52. vueForceRender('key');
  53. },
  54. saveTagsToArray: function() {
  55. tagArray = this.selected;
  56. // console.info(tagArray);
  57. },
  58. list_messages: function() {
  59. messages();
  60. },
  61. list_tags: function () {
  62. $.ajax({url: "api/tag/ids", method: "GET"})
  63. .done(jd => {
  64. // NICHT SO wg. Vue: _messagelist = jd;
  65. if(data == ""){
  66. _taglist.splice(0, _taglist.length);
  67. _taglist.push.apply(_taglist, jd);
  68. // console.log("tag: jd: " + jd);
  69. for (var e in jd) {
  70. if (!_tags[jd[e]]) {
  71. get_insert_tag(jd[e]);
  72. }
  73. }
  74. }
  75. }).fail(function (e, f, g) {
  76. console.log("err: " + e + f + g);
  77. });
  78. },
  79. clear: function() {
  80. this.searchtext = "";
  81. this.list_messages();
  82. //router.push('/files')
  83. //router.push('/home')
  84. _isSearchActiv = false;
  85. _isSubscripeButtonActiv = false;
  86. this.$emit('toggle-escape-search-link');
  87. vueForceRender('key');
  88. console.info('done');
  89. // $("#escape-search-link").css("visibility", "hidden");
  90. // $("#subscribe-btn").css("visibility", "hidden");
  91. },
  92. },
  93. mounted: function() {
  94. //this.search();
  95. this.list_tags();
  96. },
  97. });
  98. // Global Functions !!!
  99. function get_insert_tag(id) {
  100. $.ajax({
  101. url: "api/tag/id/" + id,
  102. method: "GET"
  103. }).done(function(tag) {
  104. data.push('#'+tag.name);
  105. }).fail(function(e, f, g) {
  106. console.log("cannot load " + id + ".json: " + e + f + g);
  107. })
  108. }
  109. function searching(searchtext,btnString) {
  110. _isSearchActiv = true;
  111. // $("#escape-search-link").css("visibility", "visible");
  112. //console.log(_tags);
  113. // console.log(data);
  114. if(data.indexOf(searchtext) > -1){
  115. btnString = searchtext + " abonnieren";
  116. // $("#btn-text").text(btnString);
  117. // $("#subscribe-btn").css("visibility", "visible");
  118. _isSubscripeButtonActiv = true;
  119. }else{
  120. // $("#subscribe-btn").css("visibility", "hidden");
  121. _isSubscripeButtonActiv = false;
  122. }
  123. if (searchtext !== '') {
  124. $.ajax({
  125. url: "api/msg/search/" + searchtext.replace(/#/g, ''),
  126. method: "GET"
  127. }).done(jd => {
  128. // NICHT SO wg. Vue: _messagelist = jd;
  129. _messagelist.splice(0, _messagelist.length);
  130. _messagelist.push.apply(_messagelist, jd);
  131. //console.log("jd: "+jd);
  132. for (var e in jd) {
  133. if (!_messages[jd[e]]) {
  134. get_insert_message(jd[e]);
  135. }
  136. }
  137. }).fail(function(e, f, g) {
  138. console.log("searching: err: " + e + f + g);
  139. })
  140. }
  141. return btnString;
  142. }
  143. function messages() {
  144. $.ajax({
  145. url: "api/msg/ids",
  146. method: "GET"
  147. })
  148. .done(jd => {
  149. // NICHT SO wg. Vue: _messagelist = jd;
  150. _messagelist.splice(0, _messagelist.length);
  151. _messagelist.push.apply(_messagelist, jd);
  152. //console.log("jd: "+jd);
  153. for (var e in jd) {
  154. if (!_messages[jd[e]]) {
  155. get_insert_message(jd[e]);
  156. }
  157. }
  158. }).fail(function(e, f, g) {
  159. console.log("list_msg: err: " + e + f + g);
  160. });
  161. }