CHANGELOG :
* Added checkboxes for table content interaction * Attached user id to table checkboxes * Added cycle handler for filter action
This commit is contained in:
infidel
parent
29153b4c41
commit
3e646e606a
1141
package-lock.json
generated
1141
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -17,12 +17,12 @@
|
||||
"@rollup/plugin-commonjs": "17.1.0",
|
||||
"@rollup/plugin-node-resolve": "11.2.0",
|
||||
"autoprefixer": "10.2.5",
|
||||
"postcss": "8.2.8",
|
||||
"postcss": "^8.4.19",
|
||||
"rollup": "^2.41.5",
|
||||
"rollup-plugin-livereload": "2.0.0",
|
||||
"rollup-plugin-svelte": "7.1.0",
|
||||
"rollup-plugin-terser": "7.0.2",
|
||||
"svelte": "3.35.0"
|
||||
"svelte": "^3.53.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "5.15.3",
|
||||
@ -33,6 +33,6 @@
|
||||
"chart.js": "2.9.4",
|
||||
"sirv-cli": "1.0.11",
|
||||
"svelte-routing": "1.5.0",
|
||||
"tailwindcss": "2.0.4"
|
||||
"tailwindcss": "^2.2.19"
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,22 +1,29 @@
|
||||
<script>
|
||||
|
||||
import Modal from "components/Modals/Modals.svelte"
|
||||
import CardSettings from "components/Cards/CardSettings.svelte";
|
||||
import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
|
||||
import CardWGFilter from "components/Cards/CardWGFilter.svelte";
|
||||
import Modal from "components/Modals/Modals.svelte"
|
||||
import CardWGControl from "components/Cards/CardWGControl.svelte";
|
||||
|
||||
export let filter;
|
||||
|
||||
let showModal = false;
|
||||
let showFilter = false;
|
||||
|
||||
let filter_action = false;
|
||||
let submitFilter = "";
|
||||
|
||||
|
||||
filter = submitFilter;
|
||||
|
||||
$: submitFilter != ""?
|
||||
filter = submitFilter : filter = "";
|
||||
apply_filter() : filter = "";
|
||||
|
||||
function apply_filter() {
|
||||
filter = submitFilter;
|
||||
filter_action = !filter_action;
|
||||
}
|
||||
|
||||
function reset_filter(){
|
||||
submitFilter = "";
|
||||
}
|
||||
|
||||
function toggleModal(){
|
||||
showModal = !showModal;
|
||||
@ -35,9 +42,6 @@
|
||||
console.log(filter);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
@ -45,8 +49,8 @@
|
||||
>
|
||||
<div class="rounded bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-blueGray-700 text-xl font-bold">Action</h6>
|
||||
<div class="sm:flex sm:flex-col">
|
||||
<h6 class="mt-3 text-blueGray-700 text-xl font-bold">Action</h6>
|
||||
<div class="">
|
||||
<button
|
||||
class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
@ -111,15 +115,24 @@
|
||||
<div class="rounded-t bg-teal-500 mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-teal-50 text-xl font-bold">Create Filter</h6>
|
||||
<div>
|
||||
<button
|
||||
class="bg-blueGray-700 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click="{reset_filter}"
|
||||
>
|
||||
Reset Filter
|
||||
</button>
|
||||
<button
|
||||
class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click="{toggleFilter}"
|
||||
>
|
||||
Cancel
|
||||
Close Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-t bg-white mb-0 px-6 py-6">
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
@ -131,3 +144,47 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if filter_action}
|
||||
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
|
||||
>
|
||||
<div class="rounded bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="text-blueGray-700 text-xl font-bold">Filter Action</h6>
|
||||
<div class="">
|
||||
|
||||
<button
|
||||
class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click="{toggleModal}"
|
||||
>
|
||||
Create Profile
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
on:click="{toggleFilter}"
|
||||
>
|
||||
Filter
|
||||
</button>
|
||||
<button
|
||||
class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Apply to System
|
||||
</button>
|
||||
<button
|
||||
class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
||||
type="button"
|
||||
>
|
||||
Backup
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
|
||||
@ -1,5 +1,31 @@
|
||||
<script>
|
||||
|
||||
export let submitFilter;
|
||||
let barWidth = 0;
|
||||
|
||||
const addColor = () => barWidth += 1;
|
||||
|
||||
function progress_start() {
|
||||
for (let i = 0; i < 1000; i++) {
|
||||
addColor();
|
||||
console.log("Bar width -> "+barWidth);
|
||||
}
|
||||
}
|
||||
async function getwgOrgs() {
|
||||
const wgResponse = await fetch(
|
||||
'/api2/wgClients?param=orgs'
|
||||
);
|
||||
progress_start();
|
||||
return await wgResponse.json();
|
||||
}
|
||||
|
||||
async function getwgEmails() {
|
||||
const wgResponse = await fetch(
|
||||
'/api2/wgClients?param=email'
|
||||
);
|
||||
progress_start();
|
||||
return await wgResponse.json();
|
||||
}
|
||||
|
||||
const validate = (e) => {
|
||||
const formData = new FormData(e.target)
|
||||
@ -13,10 +39,18 @@
|
||||
|
||||
console.log(data);
|
||||
console.log("I'm the tester function");
|
||||
submitFilter = data["org"];
|
||||
submitFilter = data["name"]+"+"+data["org"]+"+"+data["email_domain"];
|
||||
console.log(submitFilter);
|
||||
}
|
||||
|
||||
// let options = getwgOrgs();
|
||||
// let options = ["GCI", "META"];
|
||||
|
||||
let promise_orgs = getwgOrgs();
|
||||
let promise_email = getwgEmails();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={validate}>
|
||||
@ -30,9 +64,9 @@
|
||||
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
|
||||
for="grid-username"
|
||||
>
|
||||
Fuckery
|
||||
Name Contains :
|
||||
</label>
|
||||
<input class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" id="fuckery" type="text" name="Fuckery_name" />
|
||||
<input class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" id="fuckery" type="text" name="name" />
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
@ -42,12 +76,34 @@
|
||||
>
|
||||
Organization
|
||||
</label>
|
||||
{#await promise_orgs}
|
||||
<div class="relative pt-1">
|
||||
<div class="flex mb-2 items-center justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
|
||||
Load Options
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs font-semibold inline-block text-orange-600">
|
||||
bind:barwidth={barWidth}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
|
||||
<div style="width:{barWidth}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
{:then wgOrgs}
|
||||
<select name="org" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
|
||||
<option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
|
||||
<option value="gci">GCI</option>
|
||||
<option value="meta">META</option>
|
||||
<option value="ph-training">PH-Training</option>
|
||||
<option class="text-blueGray-100" value="" >No Organization</option>
|
||||
{#each wgOrgs as value}
|
||||
<p> {value} </p>
|
||||
<option value="{value.orgs}">{value.orgs}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
<div class="relative w-full mb-3">
|
||||
@ -57,12 +113,34 @@
|
||||
>
|
||||
Email Domain
|
||||
</label>
|
||||
{#await promise_email}
|
||||
<div class="relative pt-1">
|
||||
<div class="flex mb-2 items-center justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
|
||||
Load Options...
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs font-semibold inline-block text-orange-600">
|
||||
{barWidth}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
|
||||
<div style="width:{barWidth}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
{:then wgEmail}
|
||||
<select name="email_domain" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
|
||||
<option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
|
||||
<option>GCI</option>
|
||||
<option>META</option>
|
||||
<option>PH-Training</option>
|
||||
<option class="text-blueGray-100" value="" disabled selected>Select the Email Domain</option>
|
||||
<option class="text-blueGray-100" value="" >No Email</option>
|
||||
{#each wgEmail as value}
|
||||
<p> {value} </p>
|
||||
<option value="{value.email}">{value.email}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/await}
|
||||
</div>
|
||||
<div class="relative w-full mb-3">
|
||||
<label
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<script>
|
||||
// import axios from 'axios';
|
||||
// import {onMount} from 'svelte';
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
let footprint;
|
||||
let promise;
|
||||
|
||||
@ -20,12 +22,8 @@
|
||||
$: filter != ""?
|
||||
promise = getwgResponse(filter) : promise = getwgResponse("");
|
||||
|
||||
// core components
|
||||
|
||||
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
|
||||
|
||||
// can be one of light or dark
|
||||
export let color = "light";
|
||||
|
||||
</script>
|
||||
|
||||
{#await promise}
|
||||
@ -34,8 +32,24 @@
|
||||
class="rounded relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
|
||||
>
|
||||
<div class="rounded bg-white mb-0 px-6 py-6">
|
||||
<div class="text-center flex justify-between">
|
||||
<h6 class="uppercase text-blueGray-500 text-xl font-bold">Fetching . . .</h6>
|
||||
<div class="text-center w-full">
|
||||
<div class="relative pt-1">
|
||||
<div class="flex mb-2 items-center justify-between">
|
||||
<div>
|
||||
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200">
|
||||
Task in progress
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-xs font-semibold inline-block text-orange-600">
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200">
|
||||
<div style="width:30%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -62,9 +76,10 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
class="px-4 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-300 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
>
|
||||
#
|
||||
<input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-bold text-blueGray-500 dark:text-gray-300">#</label>
|
||||
</th>
|
||||
<th
|
||||
class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
|
||||
@ -106,10 +121,12 @@
|
||||
<tbody>
|
||||
{#each wgProfileData as infRows}
|
||||
<tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
|
||||
|
||||
<td
|
||||
class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
|
||||
class="bg-blueGray-300 border-t-8 px-4 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 rounded"
|
||||
>
|
||||
{ infRows.data_id }
|
||||
<input id="default-checkbox" type="checkbox" value="{infRows.id}" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-bold text-blueGray-500 dark:text-gray-300">{ infRows.data_id }</label>
|
||||
</td>
|
||||
|
||||
<td
|
||||
|
||||
Reference in New Issue
Block a user