#34 web: Added add protein to condensate button to the datatable in LlpsTable component.

web/src/components/DataTableCondensate.vue

 <template>
     <div class="mainContent">
-        <a ref="download"></a>
+      <a ref="download"></a>
         <table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
     </div>
 </template>
@@ -128,7 +128,7 @@
           oLanguage: {
             sSearch: "Filter ",
           },
-          dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
+          dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
           // dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
         };
 
@@ -150,6 +150,8 @@
           '    <a class="dropdown-item" href="#" ref="json">JSON</a>\n' +
           '  </div>\n' +
           '</div></div>');
+          
+          
 
         const tableBody = `${tableId} tbody`;
 

web/src/components/LlpsTable.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="inline-block no-underline font-bold mb-4">
         </div>
-        <table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
+       <table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
     </div>
 </template>
 
@@ -397,7 +397,7 @@
           oLanguage: {
             sSearch: "Filter",
           },
-          dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
+          dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8 flex justify-end"<"#addProtein.mr-2">p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
         };
 
         const tableId = `#${id}`;
@@ -405,8 +405,14 @@
           table.destroy();
           $(tableId).empty();
         }
-
-        table = $(tableId).DataTable(nTableOptions);
+       
+       table = $(tableId).DataTable(nTableOptions);
+
+        $("#addProtein").html('<div style="text-align: right;"><div class="dropdown">\n' +
+          '  <button class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
+          '    Add a protein to this condensate\n' +
+          '  </button>\n' +
+          '</div></div>');
 
         const tableBody = `${tableId} tbody`;
 

web/src/components/js/const.js

 
 export const host = '/api';
 // export const devHost = 'http://localhost:5001';
-export const devHost = '/api';
+export const devHost = 'https://dev.ddcode.org/api';
 
 export const apiHost = 'http://localhost:1337'
 export const devApiHost = 'http://localhost:1337'