Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Scott Idem
2021-07-08 11:32:13 -04:00
parent 556fe4a191
commit c19a315bf2
31 changed files with 4936 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts">
import Test from './test.svelte';
export let name: string;
</script>
<section>
<p>Name: {name}</p>
<Test />
</section>
<style>
section {
text-align: center;
}
p {
color: green;
}
</style>

75
src/App.svelte.bak Normal file
View File

@@ -0,0 +1,75 @@
<script lang="ts">
export let name: string;
let count = 0;
function handleClick() {
count += 1;
}
let m = { x: 0, y: 0 };
function handle_mousemove(event) {
m.x = event.clientX;
m.y = event.clientY;
}
let first_name = '';
let last_name = '';
let full_name = 'Not Here';
$: full_name = first_name + ' ' + last_name;
let name_checked = false;
</script>
<main>
<input bind:value={first_name}>
<input bind:value={last_name}>
<label>Check me <input type=checkbox bind:checked={name_checked}></label>
<h1>Hello {full_name}!</h1>
{#if name_checked}
<p>Thank you. We will bombard your inbox and sell your personal details.</p>
{:else}
<p>You must opt in to continue. If you're not paying, you're the product.</p>
{/if}
<button disabled={!name_checked}>
Subscribe
</button>
<p>This is a new app using Svelte.</p>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<div class="my_class">My fancy class!</div>
<div on:mousemove={handle_mousemove}>
The mouse position is {m.x} x {m.y}
</div>
</main>
<style>
main {
text-align: center;
padding: 1rem;
max-width: 240px;
margin: 0 auto;
}
h1 {
color: hsla(0, 50%, 50%, 1);
/*text-transform: uppercase;*/
font-size: 4rem;
font-weight: 100;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>

38
src/api_delete.js Normal file
View File

@@ -0,0 +1,38 @@
import axios from 'axios';
console.log('*** api_update.js ***');
var axios_fastapi = axios.create({
//baseURL: 'https://dev-fastapi.oneskyit.com',
//baseURL: 'http://fastapi.localhost:5005',
baseURL: 'http://192.168.32.20:5005',
/* other custom settings */
});
axios_fastapi.defaults.headers['Access-Control-Allow-Origin'] = '*';
axios_fastapi.defaults.headers['content-type'] = 'application/json';
axios_fastapi.defaults.headers['x-aether-api-key'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-token'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-expire-on'] = '';
axios_fastapi.defaults.headers['x-account-id'] = 'xxxyyyzzz111222333';
async function delete_object({axios=axios_fastapi, endpoint='', data=[]}) {
console.log('*** delete_object() ***');
console.log(data)
// https://stackoverflow.com/questions/51069552/axios-delete-request-with-body-and-headers
let response_data = await axios.delete(endpoint, { 'data': data }) // not just data?
.then(function (response) {
console.log(response.data);
return response.data;
})
.catch(function (error) {
console.log(error);
return error;
});
return response_data;
}
export default delete_object;

52
src/api_get.js Normal file
View File

@@ -0,0 +1,52 @@
import axios from 'axios';
console.log('*** api_update.js ***');
var axios_fastapi = axios.create({
baseURL: 'https://dev-fastapi.oneskyit.com',
// baseURL: 'http://fastapi.localhost:5005',
// baseURL: 'http://192.168.32.20:5005',
/* other custom settings */
});
axios_fastapi.defaults.headers['Access-Control-Allow-Origin'] = '*';
axios_fastapi.defaults.headers['content-type'] = 'application/json';
axios_fastapi.defaults.headers['x-aether-api-key'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-token'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-expire-on'] = '';
axios_fastapi.defaults.headers['x-account-id'] = 'xxxyyyzzz111222333';
async function get_object({axios=axios_fastapi, endpoint='', params=[], data=[], return_meta=false, force_li=false}) {
console.log('*** get_object() ***');
//console.log(endpoint);
//console.log(params);
//console.log(data);
//console.log(return_meta);
//console.log(force_li);
let response_data = await axios.get(endpoint, { params: params })
.then(function (response) {
console.log(response.data);
if (!Array.isArray(response.data['data']) && force_li) {
console.log('Forcing return as a list');
let return_data = [];
return_data.push(response.data['data']);
return return_data;
} else {
return response.data['data'];
}
//return response.data;
})
.catch(function (error) {
console.log(error.response);
if (error.response.status === 404) {
return null;
}
return error;
});
return response_data;
}
export default get_object;

45
src/api_patch.js Normal file
View File

@@ -0,0 +1,45 @@
import axios from 'axios';
console.log('*** api_update.js ***');
var axios_fastapi = axios.create({
// baseURL: 'https://dev-fastapi.oneskyit.com',
baseURL: 'http://fastapi.localhost:5005',
// baseURL: 'http://192.168.32.20:5005',
/* other custom settings */
});
axios_fastapi.defaults.headers['Access-Control-Allow-Origin'] = '*';
axios_fastapi.defaults.headers['content-type'] = 'application/json';
axios_fastapi.defaults.headers['x-aether-api-key'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-token'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-expire-on'] = '';
axios_fastapi.defaults.headers['x-account-id'] = 'xxxyyyzzz111222333';
async function patch_object({axios=axios_fastapi, endpoint='', params=[], record=[], return_meta=false}) {
console.log('*** patch_object() ***');
//console.log(endpoint);
//console.log(params);
console.log(record);
//console.log(return_meta);
//console.log(force_li);
let response_data = await axios.patch(endpoint, record, { params: params })
.then(function (response) {
console.log(response.data);
return response.data['data'];
//return response.data;
})
.catch(function (error) {
console.log(error.response);
if (error.response.status === 404) {
return null;
}
return error;
});
return response_data;
}
export default patch_object;

45
src/api_post.js Normal file
View File

@@ -0,0 +1,45 @@
import axios from 'axios';
console.log('*** api_post.js ***');
var axios_fastapi = axios.create({
// baseURL: 'https://dev-fastapi.oneskyit.com',
baseURL: 'http://fastapi.localhost:5005',
// baseURL: 'http://192.168.32.20:5005',
/* other custom settings */
});
axios_fastapi.defaults.headers['Access-Control-Allow-Origin'] = '*';
axios_fastapi.defaults.headers['content-type'] = 'application/json';
axios_fastapi.defaults.headers['x-aether-api-key'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-token'] = 'aaabbbcccxxxyyyzzz';
axios_fastapi.defaults.headers['x-aether-api-expire-on'] = '';
axios_fastapi.defaults.headers['x-account-id'] = 'xxxyyyzzz111222333';
async function post_object({axios=axios_fastapi, endpoint='', record=[], return_meta=false}) {
console.log('*** post_object() ***');
//console.log(endpoint);
//console.log(params);
console.log(record);
//console.log(return_meta);
//console.log(force_li);
let response_data = await axios.post(endpoint, record)
.then(function (response) {
console.log(response.data);
return response.data['data'];
//return response.data;
})
.catch(function (error) {
console.log(error.response);
if (error.response.status === 404) {
return null;
}
return error;
});
return response_data;
}
export default post_object;

119
src/html_input_render_templates.js Normal file
View File

@@ -0,0 +1,119 @@
var template = {};
// NOTE address template section
template['address'] = {};
template['address']['id'] = { 'obj_type': 'address', 'obj_prop_name': 'id', 'type': 'hidden', 'placeholder': '', 'class_li': [], 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'ID', 'label_class_li': [] };
template['address']['id_random'] = { 'obj_type': 'address', 'obj_prop_name': 'id_random', 'type': 'hidden', 'placeholder': '', 'class_li': [], 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'ID random', 'label_class_li': [] };
template['address']['for_type'] = { 'obj_type': 'address', 'obj_prop_name': 'for_type', 'type': 'text', 'placeholder': 'For type', 'class': 'address.for_type', 'style': '', 'label': 'For type', 'label_class_li': [] };
template['address']['for_id'] = { 'obj_type': 'address', 'obj_prop_name': 'for_id', 'type': 'text', 'placeholder': 'For ID', 'class': 'address.for_id', 'style': '', 'label': 'For ID', 'label_class_li': [] };
template['address']['name'] = { 'obj_type': 'address', 'obj_prop_name': 'name', 'type': 'text', 'placeholder': 'Name', 'class': 'address.name', 'style': '', 'label': 'Name', 'label_class_li': [] };
template['address']['attention_to'] = { 'obj_type': 'address', 'obj_prop_name': 'attention_to', 'type': 'text', 'placeholder': 'Attention to', 'class': 'address.attention_to', 'style': '', 'label': 'Attention to', 'label_class_li': [] };
template['address']['organization_name'] = { 'obj_type': 'address', 'obj_prop_name': 'organization_name', 'type': 'text', 'placeholder': 'Organization name', 'class': 'address.organization_name', 'style': '', 'label': 'Organization name', 'label_class_li': [] };
template['address']['line_1'] = { 'obj_type': 'address', 'obj_prop_name': 'line_1', 'type': 'text', 'placeholder': 'Line 1', 'class': 'address.line_1', 'style': '', 'label': 'Line 1', 'label_class_li': [] };
template['address']['line_2'] = { 'obj_type': 'address', 'obj_prop_name': 'line_2', 'type': 'text', 'placeholder': 'Line 2', 'class': 'address.line_2', 'style': '', 'label': 'Line 2', 'label_class_li': [] };
template['address']['line_3'] = { 'obj_type': 'address', 'obj_prop_name': 'line_3', 'type': 'text', 'placeholder': 'Line 3', 'class': 'address.line_3', 'style': '', 'label': 'Line 3', 'label_class_li': [] };
template['address']['city'] = { 'obj_type': 'address', 'obj_prop_name': 'city', 'type': 'text', 'placeholder': 'City', 'class': 'address.city', 'style': '', 'label': 'City', 'label_class_li': [] };
template['address']['state_province'] = { 'obj_type': 'address', 'obj_prop_name': 'state_province', 'type': 'text', 'placeholder': 'State/Province', 'class': 'address.state_province', 'style': '', 'label': 'State/Province', 'label_class_li': [] };
template['address']['postal_code'] = { 'obj_type': 'address', 'obj_prop_name': 'postal_code', 'type': 'text', 'placeholder': 'Postal Code', 'class': 'address.postal_code', 'style': '', 'label': 'Postal code', 'label_class_li': [] };
//template['address']['country_alpha_2_code'] = { 'obj_type': 'address', 'obj_prop_name': 'country_alpha_2_code', 'type': 'select', 'placeholder': 'Country alpha 2 code', 'class': 'address.country_alpha_2_code', 'style': '', 'label': 'Country alpha 2 code', 'label_class_li': [], 'select_option_li': { 'CA': 'Canada', 'MX': 'Mexico', 'US': 'United States', 'UK': 'United Kingdom' } };
template['address']['country_alpha_2_code'] = { 'obj_type': 'address', 'obj_prop_name': 'country_alpha_2_code', 'type': 'select', 'placeholder': 'Country alpha 2 code', 'class': 'address.country_alpha_2_code', 'style': '', 'label': 'Country alpha 2 code', 'label_class_li': [], 'select_option_li': { 'CA': 'Canada', 'MX': 'Mexico', 'US': 'United States', 'UK': 'United Kingdom' } };
template['address']['country'] = { 'obj_type': 'address', 'obj_prop_name': 'country', 'type': 'text', 'placeholder': 'Country', 'class': 'address.country', 'style': '', 'label': 'Country', 'label_class_li': [] };
template['address']['timezone'] = { 'obj_type': 'address', 'obj_prop_name': 'timezone', 'type': 'text', 'placeholder': 'Timezone', 'class': 'address.timezone', 'style': '', 'label': 'Timezone', 'label_class_li': [] };
template['address']['latitude'] = { 'obj_type': 'address', 'obj_prop_name': 'latitude', 'type': 'text', 'placeholder': 'Latitude', 'class': 'address.latitude', 'style': '', 'label': 'Latitude', 'label_class_li': [] };
template['address']['longitude'] = { 'obj_type': 'address', 'obj_prop_name': 'longitude', 'type': 'text', 'placeholder': 'Longitude', 'class': 'address.longitude', 'style': '', 'label': 'Longitude', 'label_class_li': [] };
template['address']['map_url'] = { 'obj_type': 'address', 'obj_prop_name': 'map_url', 'type': 'url', 'placeholder': 'Map URL', 'class': 'address.map_url', 'style': '', 'label': 'Map URL', 'label_class_li': [] };
template['address']['congressional_district'] = { 'obj_type': 'address', 'obj_prop_name': 'congressional_district', 'type': 'text', 'placeholder': 'Congressional district', 'class': 'address.congressional_district', 'style': '', 'label': 'Congressional district', 'label_class_li': [] };
template['address']['verified'] = { 'obj_type': 'address', 'obj_prop_name': 'verified', 'type': 'checkbox', 'placeholder': 'Verified', 'class': 'address.verified', 'style': '', 'label': 'Verified', 'label_class_li': [] };
template['address']['created_on'] = { 'obj_type': 'address', 'obj_prop_name': 'created_on', 'type': 'text', 'placeholder': '', 'class': 'address.created_on', 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'Created on', 'label_class_li': [] };
template['address']['updated_on'] = { 'obj_type': 'address', 'obj_prop_name': 'updated_on', 'type': 'text', 'placeholder': '', 'class': 'address.updated_on', 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'Updated on', 'label_class_li': [] };
// NOTE contact section
template['contact'] = {};
template['contact']['name'] = { 'obj_type': 'contact', 'obj_prop_name': 'name', 'type': 'text', 'placeholder': 'Name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Name', 'label_class_li': [] };
template['contact']['title'] = { 'obj_type': 'contact', 'obj_prop_name': 'title', 'type': 'text', 'placeholder': 'Title', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Title', 'label_class_li': [] };
template['contact']['tagline'] = { 'obj_type': 'contact', 'obj_prop_name': 'tagline', 'type': 'checkbox', 'placeholder': 'Tagline', 'class': 'contact.tagline', 'style': '', 'label': 'Tagline', 'label_class_li': [] };
template['contact']['email'] = { 'obj_type': 'contact', 'obj_prop_name': 'email', 'type': 'email', 'placeholder': 'Email address', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Email address', 'label_class_li': [] };
template['contact']['other_site_url'] = { 'obj_type': 'contact', 'obj_prop_name': 'website_url', 'type': 'url', 'placeholder': 'Website URL', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Website URL', 'label_class_li': [] };
template['contact']['website_name'] = { 'obj_type': 'contact', 'obj_prop_name': 'website_name', 'type': 'text', 'placeholder': 'Website name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Website name', 'label_class_li': [] };
template['contact']['phone_mobile'] = { 'obj_type': 'contact', 'obj_prop_name': 'phone_mobile', 'type': 'tel', 'placeholder': 'Phone mobile', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Phone mobile', 'label_class_li': [] };
template['contact']['phone_home'] = { 'obj_type': 'contact', 'obj_prop_name': 'phone_home', 'type': 'tel', 'placeholder': 'Phone home', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Phone home', 'label_class_li': [] };
template['contact']['phone_office'] = { 'obj_type': 'contact', 'obj_prop_name': 'phone_office', 'type': 'tel', 'placeholder': 'Phone office', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Phone office', 'label_class_li': [] };
template['contact']['phone_land'] = { 'obj_type': 'contact', 'obj_prop_name': 'phone_land', 'type': 'tel', 'placeholder': 'Phone land', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Phone land', 'label_class_li': [] };
template['contact']['phone_fax'] = { 'obj_type': 'contact', 'obj_prop_name': 'phone_fax', 'type': 'tel', 'placeholder': 'Phone fax', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Phone fax', 'label_class_li': [] };
template['contact']['facebook_url'] = { 'obj_type': 'contact', 'obj_prop_name': 'facebook_url', 'type': 'url', 'placeholder': 'Facebook URL', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Facebook URL', 'label_class_li': [] };
template['contact']['instagram_url'] = { 'obj_type': 'contact', 'obj_prop_name': 'instagram_url', 'type': 'url', 'placeholder': 'Instagram URL', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Instagram URL', 'label_class_li': [] };
template['contact']['twitter_url'] = { 'obj_type': 'contact', 'obj_prop_name': 'twitter_url', 'type': 'url', 'placeholder': 'Twitter URL', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Twitter URL', 'label_class_li': [] };
template['contact']['linkedin_url'] = { 'obj_type': 'contact', 'obj_prop_name': 'linkedin_url', 'type': 'url', 'placeholder': 'LinkedIn URL', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'LinkedIn URL', 'label_class_li': [] };
template['contact']['other_site_url'] = { 'obj_type': 'contact', 'obj_prop_name': 'other_site_url', 'type': 'url', 'placeholder': 'Other site URL', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Other site URL', 'label_class_li': [] };
template['contact']['others_site_name'] = { 'obj_type': 'contact', 'obj_prop_name': 'others_site_name', 'type': 'text', 'placeholder': 'Other site name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Other site name', 'label_class_li': [] };
template['contact']['enable'] = { 'obj_type': 'contact', 'obj_prop_name': 'enable', 'type': 'checkbox', 'placeholder': 'Enable', 'class': 'contact.enable', 'style': '', 'label': 'Enable', 'label_class_li': [] };
// NOTE site template section
template['site'] = {};
template['site']['id'] = { 'obj_type': 'site', 'obj_prop_name': 'id', 'type': 'hidden', 'placeholder': '', 'class_li': [], 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'ID', 'label_class_li': [] };
template['site']['id_random'] = { 'obj_type': 'site', 'obj_prop_name': 'id_random', 'type': 'hidden', 'placeholder': '', 'class_li': [], 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'ID random', 'label_class_li': [] };
//template['site']['fqdn_1'] = { 'obj_type': 'site', 'obj_prop_name': 'fqdn_1', 'type': 'text', 'placeholder': 'FQDN 1', 'class': 'site.fqdn_1', 'style': '', 'label': 'FQDN 1', 'label_class_li': [] };
//template['site']['fqdn_2'] = { 'obj_type': 'site', 'obj_prop_name': 'fqdn_2', 'type': 'text', 'placeholder': 'FQDN 2', 'class': 'site.fqdn_2', 'style': '', 'label': 'FQDN 2', 'label_class_li': [] };
//template['site']['fqdn_3'] = { 'obj_type': 'site', 'obj_prop_name': 'fqdn_3', 'type': 'text', 'placeholder': 'FQDN 2', 'class': 'site.fqdn_3', 'style': '', 'label': 'FQDN 3', 'label_class_li': [] };
template['site']['enable'] = { 'obj_type': 'site', 'obj_prop_name': 'enable', 'type': 'checkbox', 'placeholder': 'Enable', 'class': 'site.enable', 'style': '', 'label': 'Enable', 'label_class_li': [] };
template['site']['name'] = { 'obj_type': 'site', 'obj_prop_name': 'name', 'type': 'text', 'placeholder': 'Name', 'class': 'site.name', 'style': '', 'label': 'Name', 'label_class_li': [] };
template['site']['description'] = { 'obj_type': 'site', 'obj_prop_name': 'description', 'obj_prop_value_pre': true, 'type': 'textarea', 'placeholder': 'Description', 'class': 'site.description', 'style': '', 'label': 'Description', 'label_class_li': [], 'rows': 3, 'cols': 80 };
template['site']['logo_path'] = { 'obj_type': 'site', 'obj_prop_name': 'logo_path', 'type': 'text', 'placeholder': 'Logo path', 'class': 'site.logo_path', 'style': '', 'label': 'Logo path' };
template['site']['banner_image_path'] = { 'obj_type': 'site', 'obj_prop_name': 'banner_image_path', 'type': 'text', 'placeholder': 'Banner image path', 'class': 'site.banner_image_path', 'style': '', 'label': 'Banner image path' };
//template['site']['html_menu_path'] = { 'obj_type': 'site', 'obj_prop_name': 'html_menu_path', 'type': 'text', 'placeholder': 'HTML menu path', 'class': 'site.html_menu_path', 'style': '', 'label': 'HTML menu path' };
template['site']['site_body'] = { 'obj_type': 'site', 'obj_prop_name': 'site_body', 'obj_prop_value_pre': true, 'type': 'textarea', 'placeholder': 'Site body', 'class': 'site.site_body', 'style': '', 'label': 'Site body', 'label_class_li': [], 'rows': 10, 'cols': 80 };
template['site']['site_tagline'] = { 'obj_type': 'site', 'obj_prop_name': 'site_tagline', 'type': 'text', 'placeholder': 'Site tagline', 'class': 'site.site_tagline', 'style': '', 'label': 'Site tagline', 'label_class_li': [] };
template['site']['style_href'] = { 'obj_type': 'site', 'obj_prop_name': 'style_href', 'type': 'text', 'placeholder': 'Style HREF', 'class': 'site.style_href', 'style': '', 'label': 'Style HREF', 'label_class_li': [] };
template['site']['script_src'] = { 'obj_type': 'site', 'obj_prop_name': 'script_src', 'type': 'text', 'placeholder': 'Script SRC', 'class': 'site.script_src', 'style': '', 'label': 'Script SRC', 'label_class_li': [] };
template['site']['google_tracking_id'] = { 'obj_type': 'site', 'obj_prop_name': 'google_tracking_id', 'type': 'text', 'placeholder': 'Google tracking ID', 'class': 'site.google_tracking_id', 'style': '', 'label': 'Google tracking ID', 'label_class_li': [] };
template['site']['created_on'] = { 'obj_type': 'site', 'obj_prop_name': 'created_on', 'type': 'text', 'placeholder': '', 'class': 'site.created_on', 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'Created on', 'label_class_li': [] };
template['site']['updated_on'] = { 'obj_type': 'site', 'obj_prop_name': 'updated_on', 'type': 'text', 'placeholder': '', 'class': 'site.updated_on', 'style': '', 'readonly': 'readonly', 'disabled': 'disabled', 'required': 'required', 'label': 'Updated on', 'label_class_li': [] };
// NOTE person section
template['person'] = {};
template['person']['given_name'] = { 'obj_type': 'person', 'obj_prop_name': 'given_name', 'type': 'text', 'placeholder': 'Given name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Given name', 'label_class_li': [] };
template['person']['middle_name'] = { 'obj_type': 'person', 'obj_prop_name': 'middle_name', 'type': 'text', 'placeholder': 'Middle name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Middle name', 'label_class_li': [] };
template['person']['family_name'] = { 'obj_type': 'person', 'obj_prop_name': 'family_name', 'type': 'text', 'placeholder': 'Family name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Family name', 'label_class_li': [] };
template['person']['title'] = { 'obj_type': 'person', 'obj_prop_name': 'title', 'type': 'text', 'placeholder': 'Title', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Title', 'label_class_li': [] };
template['person']['tagline'] = { 'obj_type': 'person', 'obj_prop_name': 'tagline', 'type': 'text', 'placeholder': 'Tagline', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Tagline', 'label_class_li': [] };
template['person']['organization_name'] = { 'obj_type': 'person', 'obj_prop_name': 'organization_name', 'type': 'text', 'placeholder': 'Organization name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': '', 'label': 'Organization name', 'label_class_li': [] };
template['person']['notes'] = { 'obj_type': 'person', 'obj_prop_name': 'notes', 'obj_prop_value_pre': true, 'type': 'textarea', 'placeholder': 'Notes', 'class': 'person.notes', 'style': '', 'label': 'Notes', 'label_class_li': [], 'rows': 3, 'cols': 80 };
// NOTE user section
template['user'] = {};
template['user']['email'] = { 'obj_type': 'user', 'obj_prop_name': 'email', 'type': 'email', 'placeholder': 'Email address', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Email address', 'label_class_li': [] };
template['user']['name'] = { 'obj_type': 'user', 'obj_prop_name': 'name', 'type': 'text', 'placeholder': 'Name', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Name', 'label_class_li': [] };
template['user']['username'] = { 'obj_type': 'user', 'obj_prop_name': 'username', 'type': 'text', 'placeholder': 'Username', 'class_li': [], 'style': '', 'readonly': '', 'disabled': '', 'required': 'required', 'label': 'Username', 'label_class_li': [] };
template['user']['email_verified'] = { 'obj_type': 'user', 'obj_prop_name': 'email_verified', 'type': 'checkbox', 'placeholder': 'Email verified', 'class': 'user.email_verified', 'style': '', 'label': 'Email verified', 'label_class_li': [] };
template['user']['enable'] = { 'obj_type': 'user', 'obj_prop_name': 'enable', 'type': 'checkbox', 'placeholder': 'Enable', 'class': 'user.enable', 'style': '', 'label': 'Enable', 'label_class_li': [] };
export default template;

37
src/input_element.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
export let id_random: string = '';
export let obj_type: string = '';
export let obj_prop_name: string = '';
export let name: string = obj_prop_name;
export let id: string = `${name}--${id_random}`; // Same as the value for "for"
export let value: string = '';
export let readonly: string = '';
export let disabled: string = '';
export let required: string = '';
export let type: string = 'text';
//export let class: string = ''; // Probably not going to use
export let class_li: Array<> = [];
export let style: string = '';
export let label: string = '';
export let placeholder: string = label;
export let label_class: string = ''; // Probably not going to use
export let label_class_li: Array<> = [];
</script>
{#if type === 'text' || type === 'email' || type === 'url' || type === 'checkbox' }
<label for={id} class={label_class_li.join(' ')}>{label}</label>
<input {id} {name} class={class_li.join(' ')} {type} {value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name} />
{:else if type === 'textarea'}
<label for={id} class={label_class_li.join(' ')}>{label}</label>
<textarea {id} {name} class={class_li.join(' ')} {value} {placeholder} {readonly} {disabled} {required} data-id_random={id_random} data-obj_type={obj_type} data-obj_prop_name={obj_prop_name}></textarea>
<!-- rows="" cols="" maxlength="" -->
{/if}

176
src/log_client_viewing 2021-07-02.svelte.bak Normal file
View File

@@ -0,0 +1,176 @@
<script lang="ts">
import get_object from './api_get.js';
import delete_object from './api_delete.js';
// import InputElement from './input_element.svelte';
export let name: string;
export let account_id: string;
let log_client_viewing_list = Array();
//let log_client_viewing = Object();
let log_client_viewing = null;
//let request_promise = null;
let request_promise_list = null;
let request_promise_del = null;
function handle_get_log_client_viewing_obj_list() {
console.log('*** handle_get_log_client_viewing_obj_list() ***');
request_promise_list = get_log_client_viewing_obj_list();
}
async function get_log_client_viewing_obj_list() {
console.log('Request the log client viewing list...');
let endpoint = `/account/${account_id}/log/client_viewing/list`;
// let params = { from_datetime: '', to_datetime: '' };
let params = { };
let log_client_viewing_list_resp = await get_object({endpoint:endpoint, params:params, force_li:true});
console.log(log_client_viewing_list_resp);
log_client_viewing_list = log_client_viewing_list_resp;
}
async function get_log_client_viewing_obj(log_client_viewing_id) {
console.log('Request the log client viewing object...');
let endpoint = `log/client_viewing/${log_client_viewing_id}`;
let log_client_viewing_resp = await get_object({endpoint:endpoint});
console.log(log_client_viewing_resp);
log_client_viewing = log_client_viewing_resp;
}
function handle_delete_log_client_viewing_obj(log_client_viewing_id_random) {
console.log('*** handle_delete_log_client_viewing_obj() ***');
request_promise_del = delete_log_client_viewing_obj(log_client_viewing_id_random);
}
async function delete_log_client_viewing_obj(log_client_viewing_id_random) {
console.log('Delete the log client viewing object...');
let endpoint = `log/client_viewing/${log_client_viewing_id_random}`;
let log_client_viewing_obj_resp = await delete_object({endpoint:endpoint});
console.log(log_client_viewing_obj_resp);
}
</script>
<div>
<header>
<h1>{name}</h1>
</header>
<button on:click={handle_get_log_client_viewing_obj_list}>
Load Client Viewing Log Entries
</button>
<div class="log_client_viewing_obj_li">
{#await request_promise_list}
<div>waiting...</div>
{:then data}
<div>{data}</div>
{:catch error}
<div class="error">{error.message}</div>
{/await}
<ul>
{#each log_client_viewing_list as log_client_viewing}
<li key={log_client_viewing.log_client_viewing_id_random}>{log_client_viewing.name} {log_client_viewing.name} <button on:click={get_log_client_viewing_obj(log_client_viewing.log_client_viewing_id_random)}><span class="fas fa-trash"></span></button></li>
{/each}
</ul>
<table class="log_client_viewing_obj_tbl">
{#each log_client_viewing_list as log_client_viewing}
<tr key={log_client_viewing.log_client_viewing_id_random}>
<td>{log_client_viewing.external_client_id}</td>
<td>{log_client_viewing.name}</td>
<td>{log_client_viewing.page_load_on}</td>
<td>{log_client_viewing.authenticated_on}</td>
<td>{log_client_viewing.play_start_on_first}</td>
<td>{log_client_viewing.play_start_on_last}</td>
<td>{log_client_viewing.play_start_count}</td>
<td>{log_client_viewing.play_ended_on}</td>
<td>{log_client_viewing.play_ended_count}</td>
<td>{log_client_viewing.created_on}</td>
<td>{log_client_viewing.update_on}</td>
<button on:click={handle_delete_log_client_viewing_obj(log_client_viewing.log_client_viewing_id_random)}><span class="fas fa-trash"></span></button>
</tr>
{/each}
</table>
{#if log_client_viewing}
<div class="log_client_viewing_obj">
<div>Viewing something</div>
</div>
{:else}
<div>Nothing to see yet</div>
{/if}
</div>
<div class="log_client_viewing_obj_li">
{#await request_promise_list}
<div>waiting...</div>
{:then data}
<div>Data: {data}</div>
{:catch error}
<div class="error">{error.message}</div>
{/await}
<ul>
{#each log_client_viewing_list as log_client_viewing}
<li key={log_client_viewing.log_client_viewing_id_random}>{log_client_viewing.name}</li>
{/each}
</ul>
{#if log_client_viewing}
<div class="log_client_viewing_obj">
<h1>{log_client_viewing.name}</h1>
<div>{log_client_viewing.summary}</div>
<div>{log_client_viewing.content}</div>
<div>{log_client_viewing.description}</div>
<div>{log_client_viewing.created_on} {log_client_viewing.updated_on}</div>
</div>
{:else}
<div>Click an entry to view the details.</div>
{/if}
</div>
</div>
<style>
h1 {
color: hsla(0, 50%, 50%, 1);
/*text-transform: uppercase;*/
font-size: 4rem;
font-weight: 100;
}
.log_client_viewing_obj_tbl {
color: hsla(0, 0%, 0%, 1);
}
table {
border: solid thin hsla(0, 0%, 50%, 1);
border-collapse: collapse;
}
th, td {
border: solid thin hsla(0, 0%, 75%, 1);
border-collapse: collapse;
/* margin: 0; */
padding: .5rem;
}
tr:nth-child(even) {
background-color: hsla(0, 0%, 95%, 1);
}
tr:nth-child(odd) {
background-color: hsla(0, 0%, 85%, 1);
}
</style>

260
src/log_client_viewing.svelte Normal file
View File

@@ -0,0 +1,260 @@
<script lang="ts">
import { fade, fly } from 'svelte/transition';
import get_object from './api_get.js';
import delete_object from './api_delete.js';
// import InputElement from './input_element.svelte';
export let name: string;
export let account_id: string;
let log_client_viewing_li = Array();
$: log_client_viewing_li_length = log_client_viewing_li.length;
$: log_client_viewing_li_reviewed = log_client_viewing_li.filter(log_client_viewing_li => log_client_viewing_li.reviewed).length
//let log_client_viewing = Object();
// let log_client_viewing = null;
// let status_list_log_client_viewing = null;
// let status_delete_log_client_viewing = null;
//let request_promise = null;
let promise_request_li = null;
let promise_request_delete = null;
let promise_viewing_entry = null;
function handle_get_log_client_viewing_obj_list() {
console.log('*** handle_get_log_client_viewing_obj_list() ***');
promise_request_li = get_log_client_viewing_obj_list();
}
async function get_log_client_viewing_obj_list() {
console.log('Request the log client viewing list...');
let endpoint = `/account/${account_id}/log/client_viewing/list`;
// let params = { from_datetime: '', to_datetime: '' };
let params = { };
let log_client_viewing_li_resp = await get_object({endpoint:endpoint, params:params, force_li:true});
console.log(log_client_viewing_li_resp);
log_client_viewing_li = log_client_viewing_li_resp;
}
/*async function get_log_client_viewing_obj(log_client_viewing_id) {
console.log('Request the log client viewing object...');
let endpoint = `log/client_viewing/${log_client_viewing_id}`;
let log_client_viewing_resp = await get_object({endpoint:endpoint});
console.log(log_client_viewing_resp);
// status_list_log_client_viewing = log_client_viewing_resp;
}*/
function handle_delete_log_client_viewing_obj(rm_log_client_viewing) {
console.log('*** handle_delete_log_client_viewing_obj() ***');
if (confirm(`Remove ID ${rm_log_client_viewing.log_client_viewing_id_random}?`)) {
promise_request_delete = delete_log_client_viewing_obj(rm_log_client_viewing.log_client_viewing_id_random);
log_client_viewing_li = log_client_viewing_li.filter(log_client_viewing => log_client_viewing !== rm_log_client_viewing);
// console.log(log_client_viewing_li);
return true;
} else {
return false;
}
}
async function delete_log_client_viewing_obj(log_client_viewing_id_random) {
console.log('Delete the log client viewing object...');
let endpoint = `log/client_viewing/${log_client_viewing_id_random}`;
let log_client_viewing_obj_resp = await delete_object({endpoint:endpoint});
// console.log(log_client_viewing_obj_resp);
// status_delete_log_client_viewing = log_client_viewing_obj_resp;
}
function handle_view_log_client_viewing_obj(log_client_viewing) {
console.log('*** handle_view_log_client_viewing_obj() ***');
// if (confirm(`Entry ID ${log_client_viewing.log_client_viewing_id_random}?`)) {
promise_viewing_entry = log_client_viewing;
// promise_request_view = view_log_client_viewing_obj(rm_log_client_viewing.log_client_viewing_id_random);
// log_client_viewing_li = log_client_viewing_li.filter(log_client_viewing => log_client_viewing !== rm_log_client_viewing);
// console.log(log_client_viewing_li);
return true;
// } else {
// return false;
// }
}
function handle_promise_reset(reset_variable) {
reset_variable = null;
promise_viewing_entry = null;
}
// async function view_log_client_viewing_obj(log_client_viewing_id_random) {
// console.log('view the log client viewing object...');
// let endpoint = `log/client_viewing/${log_client_viewing_id_random}`;
// let log_client_viewing_obj_resp = await view_object({endpoint:endpoint});
// // console.log(log_client_viewing_obj_resp);
// // status_view_log_client_viewing = log_client_viewing_obj_resp;
// }
</script>
<div>
<header>
<h2>{name}</h2>
</header>
<button on:click={handle_get_log_client_viewing_obj_list}>
Load Client Viewing Log Entries
</button>
<div class="log_client_viewing_obj_li">
{#if promise_request_li}
{#await promise_request_li}
<div>Loading...</div>
{:then result}
<!-- <div>Loaded</div> -->
{:catch error}
<div class="error">{error.message}</div>
{/await}
<table class="table_borders log_client_viewing_obj_tbl table_alt_rows">
<tr>
<th>Rand ID</th>
<th>Email</th>
<th>Name</th>
<th>Page Load</th>
<th>Authenticated</th>
<th>Play Start First</th>
<th>Play Start Last</th>
<th>Play Start Count</th>
<th>Play Ended</th>
<th>Play Ended Count</th>
<th>Log Created</th>
<th>Log Updated</th>
<th>Entry</th>
</tr>
{#each log_client_viewing_li as log_client_viewing, index}
<tr key={log_client_viewing.log_client_viewing_id_random} class="record">
<!-- <td>{index}</td> -->
<td class="id_random">{log_client_viewing.log_client_viewing_id_random}</td>
<td>{#if log_client_viewing.external_client_id}{log_client_viewing.external_client_id}{/if}</td>
<td>{#if log_client_viewing.name}{log_client_viewing.name}{/if}</td>
<td>{iso_datetime_formatter(log_client_viewing.page_load_on,'datetime_short_month')}</td>
<td>{iso_datetime_formatter(log_client_viewing.authenticated_on,'datetime_short_month')}</td>
<td>{iso_datetime_formatter(log_client_viewing.play_start_on_first,'datetime_short_month')}</td>
<td>{iso_datetime_formatter(log_client_viewing.play_start_on_last,'datetime_short_month')}</td>
<td>{log_client_viewing.play_start_count}</td>
<td>{iso_datetime_formatter(log_client_viewing.play_ended_on,'datetime_short_month')}</td>
<td>{log_client_viewing.play_ended_count}</td>
<td>{iso_datetime_formatter(log_client_viewing.created_on,'datetime_short_month')}</td>
<td>{iso_datetime_formatter(log_client_viewing.updated_on,'datetime_iso_12_short_month')}</td>
<td>
<button on:click={handle_delete_log_client_viewing_obj(log_client_viewing)}><span class="fas fa-trash"></span></button>
<button on:click={handle_view_log_client_viewing_obj(log_client_viewing)}><span class="fas fa-eye"></span></button>
</td>
</tr>
{/each}
</table>
Count: {log_client_viewing_li_length}
{:else}
<div>Nothing to see yet</div>
{/if}
{#await promise_request_delete}
<div>Deleting...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
{#if promise_viewing_entry}
<div transition:fade="{{ duration: 200 }}" class="modal_container">
<div class="modal_content">
<header class="modal_header">
<section class="modal_header_begin">
<h3 class="modal_title">{promise_viewing_entry.name} ({promise_viewing_entry.external_client_id})</h3>
<div>{promise_viewing_entry.log_client_viewing_id_random}</div>
</section>
<section class="modal_header_end">
<button on:click={handle_promise_reset(promise_viewing_entry)} class="modal_close"><span class="fas fa-window-close"></span> Close</button>
</section>
</header>
<section class="modal_body">
<div>Page Loaded: {iso_datetime_formatter(promise_viewing_entry.page_load_on,'datetime_short')}</div>
<div>Authenticated: {iso_datetime_formatter(promise_viewing_entry.authenticated_on,'datetime_short_month')}</div>
<div>Start: first: {#if promise_viewing_entry.play_start_on_first}{iso_datetime_formatter(promise_viewing_entry.play_start_on_first,'datetime_short_month')}{/if} {#if promise_viewing_entry.play_start_on_last}last: {iso_datetime_formatter(promise_viewing_entry.play_start_on_last,'datetime_short_month')}{/if} x{#if promise_viewing_entry.play_start_count}{promise_viewing_entry.play_start_count}{/if}</div>
<div>Pause: first: {iso_datetime_formatter(promise_viewing_entry.play_pause_on_first,'datetime_short_month')} last: {iso_datetime_formatter(promise_viewing_entry.play_pause_on_last,'datetime_short_month')} x{promise_viewing_entry.play_pause_count}</div>
<div>Seeked: first: {iso_datetime_formatter(promise_viewing_entry.play_seeked_on_first,'datetime_short_month')} last: {iso_datetime_formatter(promise_viewing_entry.play_seeked_on_last,'datetime_short_month')} x{promise_viewing_entry.play_seeked_count}</div>
<div>Ended: {iso_datetime_formatter(promise_viewing_entry.play_ended_on,'datetime_short_month')} x{promise_viewing_entry.play_ended_count}</div>
<div>Volume: {iso_datetime_formatter(promise_viewing_entry.play_volume_change_on,'datetime_short_month')} x{promise_viewing_entry.play_volume_change_count} vol: {promise_viewing_entry.play_volume}</div>
<div>Muted: {promise_viewing_entry.play_muted} x{promise_viewing_entry.play_muted_toggle_count}</div>
<div>Last Ping: {iso_datetime_formatter(promise_viewing_entry.last_ping,'datetime_short')}</div>
<div>Log Created/Updated: {iso_datetime_formatter(promise_viewing_entry.created_on,'datetime_short')} / {iso_datetime_formatter(promise_viewing_entry.updated_on,'datetime_short')}</div>
<div>
Client App:
<pre>
{format_json_string(promise_viewing_entry.client_app_json)}
</pre>
</div>
</section>
<footer class="modal_footer">
<section class="modal_footer_begin">
<div class="load_datetime"><span class="label">Loaded:</span> <span class="datetime">{new Date()}</span></div>
</section>
<section class="modal_footer_end">
<button on:click={handle_promise_reset(promise_viewing_entry)} class="modal_close"><span class="fas fa-window-close"></span> Close</button>
</section>
</footer>
</div>
</div>
{:else}
<div>Select an entry above</div>
{/if}
</div>
</div>
<style>
.log_client_viewing_obj_tbl tr:hover {
background-color: hsla(0, 25%, 90%, 1);
}
.log_client_viewing_obj_tbl {
font-size: .8rem;
}
.record .id_random {
font-size: .5rem;
}
/* .record_details {
display: fixed;
top: 1rem;
right: 1rem;
bottom: 1rem;
left: 1rem;
border: solid thin hsla(0, 0%, 50%, 1);
} */
</style>

56
src/main.ts Normal file
View File

@@ -0,0 +1,56 @@
// import api from './api.js';
import App from './App.svelte';
import log_client_viewing_li from './log_client_viewing.svelte';
import membership_member_manage from './membership_member_manage.svelte';
import person from './person.svelte';
// import user from './user.svelte';
// <App />
if (document.getElementById('log_client_viewing_list_container')) {
const log_client_viewing_app = new log_client_viewing_li({
target: document.getElementById('log_client_viewing_list_container'),
props: {
'name': 'List Client Viewing Log',
'account_id': account_id,
}
});
}
if (document.getElementById('membership_member_manage_container')) {
const membership_member_manage_app = new membership_member_manage({
target: document.getElementById('membership_member_manage_container'),
props: {
'name': 'Membership Member Manage',
'account_id': account_id,
'membership_member_id': membership_member_id,
}
});
}
if (document.getElementById('person_container')) {
const person_app = new person({
target: document.getElementById('person_container'),
props: {
'name': 'Person',
'account_id': account_id,
'person_id': person_id,
}
});
}
// if (document.getElementById('user_container')) {
// const user_app = new user({
// target: document.getElementById('user_container'),
// props: {
// 'name': 'User',
// 'account_id': account_id,
// 'user_id': user_id,
// }
// });
// }
//export default app;
//export app_2;

264
src/membership_member_manage.svelte Normal file
View File

@@ -0,0 +1,264 @@
<script lang="ts">
import { fade, fly } from 'svelte/transition';
// import delete_object from './api_delete.js';
import get_object from './api_get.js';
import update_object from './api_patch.js';
export let name: string;
export let account_id: string;
export let membership_member_id: string;
let membership_member_obj_li = Array();
// let membership_member_obj = null;
let membership_member_obj_view = null;
let promise_request_obj_del = null;
// let promise_request_obj_get = null;
let promise_request_obj_li = null;
let promise_request_obj_up = null;
function handle_get_membership_member_obj_li() {
console.log('*** handle_get_membership_member_obj_li() ***');
promise_request_obj_li = get_membership_member_obj_li();
}
async function get_membership_member_obj_li() {
console.log('*** get_membership_member_obj_li() ***');
let endpoint = `/account/${account_id}/membership/member/list`;
let params = { inc_person: true, inc_user: true };
let membership_member_obj_li_resp = await get_object({endpoint:endpoint, params:params, force_li:true});
console.log(membership_member_obj_li_resp);
membership_member_obj_li = membership_member_obj_li_resp;
}
function handle_view_membership_member_obj(membership_member_obj) {
console.log('*** handle_view_membership_member_obj() ***');
membership_member_obj_view = membership_member_obj;
}
function handle_reset_view_membership_member_obj() {
console.log('*** handle_reset_view_membership_member_obj() ***');
membership_member_obj_view = null;
}
function handle_status_membership_member_obj(membership_member_obj, status) {
console.log('*** handle_status_membership_member_obj() ***');
// console.log(membership_member_obj);
// console.log(membership_member_obj_li.indexOf(membership_member_obj));
let index = membership_member_obj_li.indexOf(membership_member_obj);
// membership_member_obj_up = membership_member_obj_li[index];
let membership_member_id = membership_member_obj.membership_member_id_random;
let data = {}
// let status_name = null;
let current_datetime = new Date();
switch (status) {
case 'pending':
data = { 'status_id': 1, 'approved_on': null, 'start_on': null };
membership_member_obj_li[index].status_id = 1;
membership_member_obj_li[index].status_name = 'Pending';
membership_member_obj_li[index].approved_on = null;
membership_member_obj_li[index].start_on = null;
break;
case 'approve':
data = { 'status_id': 3, 'approved_on': current_datetime };
membership_member_obj_li[index].status_id = 3;
membership_member_obj_li[index].status_name = 'Approved';
membership_member_obj_li[index].approved_on = current_datetime;
break;
case 'reject':
data = { 'status_id': 4, 'approved_on': null, 'start_on': null };
membership_member_obj_li[index].status_id = 4;
membership_member_obj_li[index].status_name = 'Rejected';
membership_member_obj_li[index].approved_on = null;
membership_member_obj_li[index].start_on = null;
break;
case 'active':
data = { 'status_id': 5, 'start_on': current_datetime };
membership_member_obj_li[index].status_id = 5;
membership_member_obj_li[index].status_name = 'Active';
membership_member_obj_li[index].start_on = current_datetime;
if (!membership_member_obj_li[index].first_start_on) {
data['first_start_on'] = current_datetime;
membership_member_obj_li[index].first_start_on = current_datetime;
}
break;
}
promise_request_obj_up = update_membership_member_obj(membership_member_id, data);
// membership_member_obj.status_id = data['status_id'];
// membership_member_obj.status_name = status_name;
// membership_member_obj.approved_on = data['approved_on'];
// let array_index = membership_member_obj_li.indexOf(membership_member_obj);
// membership_member_obj_up.status_id = data['status_id'];
// membership_member_obj_up.status_name = status_name;
// membership_member_obj_up.approved_on = data['approved_on'];
// membership_member_obj_li = membership_member_obj_li.filter(log_client_viewing => log_client_viewing !== rm_log_client_viewing);
}
async function update_membership_member_obj(membership_member_id, data) {
console.log('*** update_membership_member_obj() ***');
let endpoint = `/membership/member/${membership_member_id}`;
let membership_member_obj_up_resp = await update_object({endpoint:endpoint, record:data});
console.log(membership_member_obj_up_resp);
// membership_member_obj_li = membership_member_obj_up_resp;
}
</script>
<div>
<header>
<h2>{name}</h2>
</header>
<button on:click={handle_get_membership_member_obj_li}>
Load Membership Member List
</button>
<div class="membership_member_obj_li">
{#if membership_member_obj_li}
{#await membership_member_obj_li}
<div>Loading...</div>
{:then result}
<!-- <div>Loaded</div> -->
{:catch error}
<div class="error">{error.message}</div>
{/await}
<table class="table_borders membership_member_obj_tbl table_alt_rows">
<tr>
<th>Actions</th>
<!-- <th>Index</th> -->
<th>ID</th>
<th>Type</th>
<th>Status</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Approved</th>
<th>First Start On</th>
<th>Current Start On</th>
</tr>
{#each membership_member_obj_li as membership_member_obj, index}
<tr key={membership_member_obj.membership_member_id_random} class="record">
<td>
<button on:click={handle_view_membership_member_obj(membership_member_obj)}><span class="fas fa-eye"></span></button>
</td>
<!-- <td>{index}</td> -->
<td class="id_random">{membership_member_obj.membership_member_id_random}</td>
<td class="type_name">{membership_member_obj.type_name}</td>
<td class="status_name">
{membership_member_obj.status_name}
{#if membership_member_obj.status_name === 'Pending'}
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'approve')} title="Set to approved"><span class="fas fa-user-check"></span></button>
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'reject')} title="Set to rejected"><span class="fas fa-user-times"></span></button>
{:else if membership_member_obj.status_name === 'Rejected'}
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'pending')} title="Set to pending"><span class="fas fa-user-lock"></span></button>
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'reject')} title="Set to rejected"><span class="fas fa-user-times"></span></button>
{:else if membership_member_obj.status_name === 'Approved'}
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'reject')} title="Set to rejected"><span class="fas fa-user-times"></span></button>
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'active')} title="Set to active"><span class="fas fa-user-check"></span></button>
{/if}
</td>
<td class="full_name">{membership_member_obj.person.full_name}</td>
<td class="username">{membership_member_obj.user.username}</td>
<td class="email">{membership_member_obj.user.email}</td>
<td class="approved_on">{iso_datetime_formatter(membership_member_obj.approved_on,'datetime_short')}</td>
<td class="first_start_on">{iso_datetime_formatter(membership_member_obj.first_start_on,'datetime_short')}</td>
<td class="start_on">{iso_datetime_formatter(membership_member_obj.start_on,'datetime_short')}</td>
</tr>
{/each}
</table>
{:else}
<div>Nothing loaded yet</div>
{/if}
{#await promise_request_obj_del}
<div>Deleting...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
{#await promise_request_obj_up}
<div>Updating...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
{#if membership_member_obj_view}
<div transition:fade="{{ duration: 200 }}" class="modal_container">
<div class="modal_content">
<header class="modal_header">
<section class="modal_header_begin">
<h3 class="modal_title">{membership_member_obj_view.person.full_name} ({membership_member_obj_view.user.username})</h3>
<div>{membership_member_obj_view.membership_member_id_random}</div>
</section>
<section class="modal_header_end">
<button on:click={handle_reset_view_membership_member_obj(membership_member_obj_view)} class="modal_close"><span class="fas fa-window-close"></span> Close</button>
</section>
</header>
<section class="modal_body">
<div>Approved on: {iso_datetime_formatter(membership_member_obj_view.approved_on,'datetime_short')}</div>
<div>Created/Updated: {iso_datetime_formatter(membership_member_obj_view.created_on,'datetime_short')} / {iso_datetime_formatter(membership_member_obj_view.updated_on,'datetime_short')}</div>
</section>
<footer class="modal_footer">
<section class="modal_footer_begin">
<div class="load_datetime"><span class="label">Loaded:</span> <span class="datetime">{new Date()}</span></div>
</section>
<section class="modal_footer_end">
<button on:click={handle_reset_view_membership_member_obj(membership_member_obj_view)} class="modal_close"><span class="fas fa-window-close"></span> Close</button>
</section>
</footer>
</div>
</div>
{:else}
<div>Select an entry above</div>
{/if}
</div>
</div>
<style>
.membership_member_obj_tbl tr:hover {
background-color: hsla(0, 25%, 90%, 1);
}
.membership_member_obj_tbl {
font-size: .8rem;
}
.record .id_random {
font-size: .5rem;
}
/* .record_details {
display: fixed;
top: 1rem;
right: 1rem;
bottom: 1rem;
left: 1rem;
border: solid thin hsla(0, 0%, 50%, 1);
} */
</style>

342
src/person.svelte Normal file
View File

@@ -0,0 +1,342 @@
<script lang="ts">
import { onMount } from 'svelte';
import { fade, fly } from 'svelte/transition';
// import delete_object from './api_delete.js';
import get_object from './api_get.js';
// import post_object from './api_post.js';
import patch_object from './api_patch.js';
import html_template from './html_input_render_templates.js';
import Input_element from './input_element.svelte';
export let name: string;
export let account_id: string;
export let person_id: string;
let person_obj = null;
let person_obj_get_promise = null;
let person_obj_up_promise = null;
let person_obj_edit = false;
let given_name = null;
let person_given_name_template = { name: 'given_name', label: 'Given name', type: 'text' };
let person_middle_name_template = { name: 'middle_name', label: 'Middle name', type: 'text' };
let person_family_name_template = { name: 'family_name', label: 'Family name', type: 'text' };
let contact_obj_edit = false;
let email = null;
let address_obj_edit = false;
let line_1 = false;
let person_data = null;
// let promise_request_obj_del = null;
// let promise_request_obj_get = null;
// let promise_request_obj_li = null;
let promise_request_obj_up = null;
onMount(() => {
console.log('The component has mounted');
person_obj_get_promise = get_person_obj(person_id);
/* const interval = setInterval(() => {
console.log('beep');
}, 1000); */
});
function handle_get_person_obj(person_id) {
console.log('*** handle_get_person_obj() ***');
person_obj_get_promise = get_person_obj(person_id);
}
async function get_person_obj(person_id) {
console.log('*** get_person_obj() ***');
let endpoint = `/person/${person_id}`;
let params = { inc_address: true, inc_contact: true, inc_membership_member: true };
let person_obj_get_resp = await get_object({endpoint:endpoint, params:params});
person_obj = person_obj_get_resp;
given_name = person_obj.given_name;
email = person_obj.contact.email;
line_1 = person_obj.contact.address.line_1;
return true;
}
function handle_update_person_obj() {
console.log('*** handle_update_person_obj() ***');
person_obj_up_promise = update_person_obj(person_id, person_data);
}
async function update_person_obj(person_id, person_data) {
console.log('*** update_person_obj() ***');
let endpoint = `/person/${person_id}`;
let params = { return_obj: true };
let person_obj_up_resp = await patch_object({endpoint:endpoint, params:params, record:person_data});
console.log(person_obj_up_resp);
person_obj = { ...person_obj, ...person_obj_up_resp };
return true;
}
function handle_edit_person(value) {
console.log('*** handle_edit_person() ***');
person_obj_edit = true;
}
function handle_cancel_person() {
console.log('*** handle_cancel_person() ***');
person_obj_edit = false;
}
function handle_save_person(event) {
console.log('*** handle_save_person() ***');
console.log(event);
console.log(event.target);
console.log(event.target.given_name.value);
console.log(event.target.family_name.value);
// person_id = event.target.person_id.value;
let person_data = {};
person_data['given_name'] = event.target.given_name.value;
person_data['middle_name'] = event.target.middle_name.value;
person_data['family_name'] = event.target.family_name.value;
let name_li = process_person_name(person_data);
person_data['title'] = event.target.title.value;
person_data['tagline'] = event.target.tagline.value;
person_data['organization_name'] = event.target.organization_name.value;
person_data['notes'] = event.target.notes.value;
person_data = Object.assign(person_data, name_li);
console.log(person_data);
person_obj_up_promise = update_person_obj(person_id, person_data);
// person_obj_edit = true;
}
function handle_delete_person(value) {
console.log('*** handle_delete_person() ***');
// person_obj_edit = true;
}
function handle_edit_contact(value) {
console.log('*** handle_edit_contact() ***');
contact_obj_edit = true;
}
function handle_cancel_contact(value) {
console.log('*** handle_cancel_contact() ***');
contact_obj_edit = false;
}
function handle_save_contact(value) {
console.log('*** handle_save_contact() ***');
}
function handle_delete_contact(value) {
console.log('*** handle_delete_contact() ***');
}
function handle_edit_address(value) {
console.log('*** handle_edit_address() ***');
address_obj_edit = true;
}
function handle_cancel_address(value) {
console.log('*** handle_cancel_address() ***');
address_obj_edit = false;
}
function handle_save_address(value) {
console.log('*** handle_save_address() ***');
}
function handle_delete_address(value) {
console.log('*** handle_delete_address() ***');
}
function test_fun() {
console.log('*** test_fun() ***');
return false;
}
</script>
<div>
<header>
<h2>{name}</h2>
</header>
<div class="person_obj">
<button on:click={handle_get_person_obj(person_id)}>
Load Person
</button>
{#await person_obj_get_promise}
<!-- promise is pending -->
<div>Loading...</div>
{:then result}
<!-- promise was fulfilled -->
{#if person_obj}
<section class="person_obj obj">
{#if person_obj_edit == true}
<form on:submit|preventDefault={handle_save_person} class="" on:keydown={e => e.key === 'Escape' && handle_cancel_person}>
<input value={person_obj.person_id_random} type="hidden" id="person__id_random--{person_obj.person_id_random}" name="id_random" />
<fieldset class="">
<legend>Name</legend>
<Input_element {...html_template['person']['given_name']} id_random={person_obj.person_id_random} value={person_obj.given_name} />
<Input_element {...html_template['person']['middle_name']} id_random={person_obj.person_id_random} value={person_obj.middle_name} />
<Input_element {...html_template['person']['family_name']} id_random={person_obj.person_id_random} value={person_obj.family_name} />
</fieldset>
<Input_element {...html_template['person']['title']} id_random={person_obj.person_id_random} value={person_obj.title} />
<Input_element {...html_template['person']['tagline']} id_random={person_obj.person_id_random} value={person_obj.tagline} />
<Input_element {...html_template['person']['organization_name']} id_random={person_obj.person_id_random} value={person_obj.organization_name} />
<Input_element {...html_template['person']['notes']} id_random={person_obj.person_id_random} value={person_obj.notes} />
<div class="edit_options">
<button class="btn person-cancel" on:click={handle_cancel_person} type="button">
Cancel<span class="visually_hidden">name change</span>
</button>
<button class="btn btn__primary person-edit" type="submit" disabled={!given_name}>
Save<span class="visually_hidden">name change</span>
</button>
</div>
</form>
Full name: {person_obj.full_name}
{:else}
Name: {person_obj.full_name} {person_obj.given_name} {person_obj.middle_name} {person_obj.family_name}
Organization name {person_obj.organization_name}
<div class="edit_options">
<button type="button" class="btn" on:click={handle_edit_person}>
Edit<span class="visually_hidden"> person</span>
</button>
<button type="button" class="btn btn__danger" on:click={handle_delete_person}>
Delete<span class="visually_hidden"> person</span>
</button>
</div>
{/if}
<section class="contact_obj obj">
{#if contact_obj_edit == true}
<form on:submit|preventDefault={handle_save_contact} class="" on:keydown={e => e.key === 'Escape' && handle_cancel_contact}>
<input value={person_obj.contact.contact_id_random} type="hidden" id="contact__id_random--{person_obj.contact.contact_id_random}" name="id_random" />
<label for="contact__email--{person_obj.contact.contact_id_random}" class="">Email</label>
<input bind:value={email} type="text" id="contact__email--{person_obj.contact.contact_id_random}" autoComplete="off" class="" />
<div class="edit_options">
<button class="btn contact-cancel" on:click={handle_cancel_contact} type="button">
Cancel<span class="visually_hidden">contact change</span>
</button>
<button class="btn btn__primary contact-edit" type="submit" disabled={!email}>
Save<span class="visually_hidden">contact change</span>
</button>
</div>
</form>
{:else}
Email: {person_obj.contact.email}
<div class="edit_options">
<button type="button" class="btn" on:click={handle_edit_contact}>
Edit<span class="visually_hidden"> contact</span>
</button>
<button type="button" class="btn btn__danger" on:click={handle_delete_contact}>
Delete<span class="visually_hidden"> contact</span>
</button>
</div>
{/if}
</section>
<section class="address_obj obj">
{#if address_obj_edit == true}
<form on:submit|preventDefault={handle_save_address} class="" on:keydown={e => e.key === 'Escape' && handle_cancel_address}>
<input value={person_obj.contact.address.address_id_random} type="hidden" id="address__id_random--{person_obj.contact.address.address_id_random}" name="id_random" />
<label for="address__line_1--{person_obj.contact.address.address_id_random}" class="">Line 1</label>
<input bind:value={line_1} type="text" id="address__line_1--{person_obj.contact.address.address_id_random}" autoComplete="off" class="" />
<div class="edit_options">
<button class="btn address-cancel" on:click={handle_cancel_address} type="button">
Cancel<span class="visually_hidden">address change</span>
</button>
<button class="btn btn__primary address-edit" type="submit" disabled={!line_1}>
Save<span class="visually_hidden">address change</span>
</button>
</div>
</form>
{:else}
Line 1: {person_obj.contact.address.line_1}
City: {person_obj.contact.address.city}
State/Province: {person_obj.contact.address.country_subdivision_name}
<div class="edit_options">
<button type="button" class="btn" on:click={handle_edit_address}>
Edit<span class="visually_hidden"> address</span>
</button>
<button type="button" class="btn btn__danger" on:click={handle_delete_address}>
Delete<span class="visually_hidden"> address</span>
</button>
</div>
{/if}
</section>
</section> <!-- END section contact_obj -->
{:else}
<div>Nothing loaded yet</div>
{/if}
{:catch error}
<!-- promise was rejected -->
<div class="error">{error.message}</div>
{/await}
{#await promise_request_obj_up}
<div>Updating...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
</div>
</div>
<style>
section.obj {
margin: 1rem 0rem;
padding: .5rem .5rem;
}
.person_obj {
border: solid thin hsla(0, 25%, 90%, 1);
}
.contact_obj {
border: solid thin hsla(0, 25%, 90%, 1);
}
.address_obj{
border: solid thin hsla(0, 25%, 90%, 1);
}
</style>

322
src/person.svelte.bak Normal file
View File

@@ -0,0 +1,322 @@
<script lang="ts">
import { onMount } from 'svelte';
import { fade, fly } from 'svelte/transition';
// import delete_object from './api_delete.js';
import get_object from './api_get.js';
// import post_object from './api_post.js';
import patch_object from './api_patch.js';
export let name: string;
export let account_id: string;
export let person_id: string;
let person_obj = null;
let person_obj_get_promise = null;
let person_obj_up_promise = null;
let person_obj_edit = false;
let given_name = null;
let contact_obj_edit = false;
let email = null;
let address_obj_edit = false;
let line_1 = false;
let person_data = null;
// let promise_request_obj_del = null;
// let promise_request_obj_get = null;
// let promise_request_obj_li = null;
let promise_request_obj_up = null;
onMount(() => {
console.log('The component has mounted');
person_obj_get_promise = get_person_obj(person_id);
/* const interval = setInterval(() => {
console.log('beep');
}, 1000); */
});
function handle_get_person_obj(person_id) {
console.log('*** handle_get_person_obj() ***');
person_obj_get_promise = get_person_obj(person_id);
}
async function get_person_obj(person_id) {
console.log('*** get_person_obj() ***');
let endpoint = `/person/${person_id}`;
let params = { inc_address: true, inc_contact: true, inc_membership_member: true };
let person_obj_get_resp = await get_object({endpoint:endpoint, params:params});
person_obj = person_obj_get_resp;
given_name = person_obj.given_name;
email = person_obj.contact.email;
line_1 = person_obj.contact.address.line_1;
return true;
}
function handle_update_person_obj() {
console.log('*** handle_update_person_obj() ***');
person_obj_up_promise = update_person_obj(person_id, person_data);
}
async function update_person_obj(person_id, person_data) {
console.log('*** update_person_obj() ***');
let endpoint = `/person/${person_id}`;
let params = { return_obj: true };
let person_obj_up_resp = await patch_object({endpoint:endpoint, params:params, record:person_data});
console.log(person_obj_up_resp);
person_obj = { ...person_obj, ...person_obj_up_resp };
return true;
}
function handle_edit_person(value) {
console.log('*** handle_edit_person() ***');
person_obj_edit = true;
}
function handle_cancel_person() {
console.log('*** handle_cancel_person() ***');
person_obj_edit = false;
}
function handle_save_person(event) {
console.log('*** handle_save_person() ***');
console.log(event);
console.log(event.target);
console.log(event.target.given_name.value);
console.log(event.target.family_name.value);
// person_id = event.target.person_id.value;
let person_data = {};
person_data['given_name'] = event.target.given_name.value;
person_data['middle_name'] = event.target.middle_name.value;
person_data['family_name'] = event.target.family_name.value;
console.log(person_data);
// person_data['full_name'] = `${event.target.given_name.value} ${event.target.family_name.value}`;
let name_li = process_person_name(person_data);
// person_data = { ...person_data, name_li };
person_data = Object.assign(person_data, name_li);
console.log(person_data);
person_obj_up_promise = update_person_obj(person_id, person_data);
// person_obj_edit = true;
}
function handle_delete_person(value) {
console.log('*** handle_delete_person() ***');
// person_obj_edit = true;
}
function handle_edit_contact(value) {
console.log('*** handle_edit_contact() ***');
contact_obj_edit = true;
}
function handle_cancel_contact(value) {
console.log('*** handle_cancel_contact() ***');
contact_obj_edit = false;
}
function handle_save_contact(value) {
console.log('*** handle_save_contact() ***');
}
function handle_delete_contact(value) {
console.log('*** handle_delete_contact() ***');
}
function handle_edit_address(value) {
console.log('*** handle_edit_address() ***');
address_obj_edit = true;
}
function handle_cancel_address(value) {
console.log('*** handle_cancel_address() ***');
address_obj_edit = false;
}
function handle_save_address(value) {
console.log('*** handle_save_address() ***');
}
function handle_delete_address(value) {
console.log('*** handle_delete_address() ***');
}
function test_fun() {
console.log('*** test_fun() ***');
return false;
}
</script>
<div>
<header>
<h2>{name}</h2>
</header>
<div class="person_obj">
<button on:click={handle_get_person_obj(person_id)}>
Load Person
</button>
{#await person_obj_get_promise}
<!-- promise is pending -->
<div>Loading...</div>
{:then result}
<!-- promise was fulfilled -->
{#if person_obj}
<section class="person_obj">
{#if person_obj_edit == true}
<form on:submit|preventDefault={handle_save_person} class="" on:keydown={e => e.key === 'Escape' && handle_cancel_person}>
<input value={person_obj.person_id_random} type="hidden" id="person__id_random--{person_obj.person_id_random}" name="id_random" />
<label for="person__given_name--{person_obj.person_id_random}" class="">Given Name</label>
<input bind:value={given_name} type="text" id="person__given_name--{person_obj.person_id_random}" name="given_name" autoComplete="off" class="" />
<label for="person__middle_name--{person_obj.person_id_random}" class="">Middle Name</label>
<input value={person_obj.middle_name} type="text" id="person__middle_name--{person_obj.person_id_random}" name="middle_name" autoComplete="off" class="" />
<label for="person__family_name--{person_obj.person_id_random}" class="">Family Name</label>
<input value={person_obj.family_name} type="text" id="person__family_name--{person_obj.person_id_random}" name="family_name" autoComplete="off" class="" />
<div class="edit_options">
<button class="btn person-cancel" on:click={handle_cancel_person} type="button">
Cancel<span class="visually_hidden">name change</span>
</button>
<button class="btn btn__primary person-edit" type="submit" disabled={!given_name}>
Save<span class="visually_hidden">name change</span>
</button>
</div>
</form>
Full name: {person_obj.full_name}
{:else}
Name: {person_obj.full_name} {person_obj.given_name} {person_obj.middle_name} {person_obj.family_name}
Organization name {person_obj.organization_name}
<div class="edit_options">
<button type="button" class="btn" on:click={handle_edit_person}>
Edit<span class="visually_hidden"> person</span>
</button>
<button type="button" class="btn btn__danger" on:click={handle_delete_person}>
Delete<span class="visually_hidden"> person</span>
</button>
</div>
{/if}
<section class="contact_obj">
{#if contact_obj_edit == true}
<form on:submit|preventDefault={handle_save_contact} class="" on:keydown={e => e.key === 'Escape' && handle_cancel_contact}>
<input value={person_obj.contact.contact_id_random} type="hidden" id="contact__id_random--{person_obj.contact.contact_id_random}" name="id_random" />
<label for="contact__email--{person_obj.contact.contact_id_random}" class="">Email</label>
<input bind:value={email} type="text" id="contact__email--{person_obj.contact.contact_id_random}" autoComplete="off" class="" />
<div class="edit_options">
<button class="btn contact-cancel" on:click={handle_cancel_contact} type="button">
Cancel<span class="visually_hidden">contact change</span>
</button>
<button class="btn btn__primary contact-edit" type="submit" disabled={!email}>
Save<span class="visually_hidden">contact change</span>
</button>
</div>
</form>
{:else}
Email: {person_obj.contact.email}
<div class="edit_options">
<button type="button" class="btn" on:click={handle_edit_contact}>
Edit<span class="visually_hidden"> contact</span>
</button>
<button type="button" class="btn btn__danger" on:click={handle_delete_contact}>
Delete<span class="visually_hidden"> contact</span>
</button>
</div>
{/if}
</section>
<section class="address_obj">
{#if address_obj_edit == true}
<form on:submit|preventDefault={handle_save_address} class="" on:keydown={e => e.key === 'Escape' && handle_cancel_address}>
<input value={person_obj.contact.address.address_id_random} type="hidden" id="address__id_random--{person_obj.contact.address.address_id_random}" name="id_random" />
<label for="address__line_1--{person_obj.contact.address.address_id_random}" class="">Line 1</label>
<input bind:value={line_1} type="text" id="address__line_1--{person_obj.contact.address.address_id_random}" autoComplete="off" class="" />
<div class="edit_options">
<button class="btn address-cancel" on:click={handle_cancel_address} type="button">
Cancel<span class="visually_hidden">address change</span>
</button>
<button class="btn btn__primary address-edit" type="submit" disabled={!line_1}>
Save<span class="visually_hidden">address change</span>
</button>
</div>
</form>
{:else}
Line 1: {person_obj.contact.address.line_1}
City: {person_obj.contact.address.city}
State/Province: {person_obj.contact.address.country_subdivision_name}
<div class="edit_options">
<button type="button" class="btn" on:click={handle_edit_address}>
Edit<span class="visually_hidden"> address</span>
</button>
<button type="button" class="btn btn__danger" on:click={handle_delete_address}>
Delete<span class="visually_hidden"> address</span>
</button>
</div>
{/if}
</section>
</section> <!-- END section contact_obj -->
{:else}
<div>Nothing loaded yet</div>
{/if}
{:catch error}
<!-- promise was rejected -->
<div class="error">{error.message}</div>
{/await}
{#await promise_request_obj_up}
<div>Updating...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
</div>
</div>
<style>
.person_obj {
border: solid thin hsla(0, 25%, 90%, 1);
}
.contact_obj {
border: solid thin hsla(0, 25%, 90%, 1);
}
.address_obj{
border: solid thin hsla(0, 25%, 90%, 1);
}
</style>

13
src/test.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
export let name: string;
</script>
<section>
<p>This is a test. Name: {name}</p>
</section>
<style>
p {
color: red;
}
</style>

264
src/user.svelte Normal file
View File

@@ -0,0 +1,264 @@
<script lang="ts">
import { fade, fly } from 'svelte/transition';
// import delete_object from './api_delete.js';
import get_object from './api_get.js';
// import post_object from './api_post.js';
import update_object from './api_update.js';
export let name: string;
export let account_id: string;
export let user_id: string;
let user_obj = null;
// let membership_member_obj_view = null;
// let promise_request_obj_del = null;
let promise_request_obj_get = null;
// let promise_request_obj_li = null;
let promise_request_obj_up = null;
function handle_get_membership_member_obj_li() {
console.log('*** handle_get_membership_member_obj_li() ***');
promise_request_obj_li = get_membership_member_obj_li();
}
async function get_membership_member_obj_li() {
console.log('*** get_membership_member_obj_li() ***');
let endpoint = `/account/${account_id}/membership/member/list`;
let params = { inc_person: true, inc_user: true };
let membership_member_obj_li_resp = await get_object({endpoint:endpoint, params:params, force_li:true});
console.log(membership_member_obj_li_resp);
membership_member_obj_li = membership_member_obj_li_resp;
}
function handle_view_membership_member_obj(membership_member_obj) {
console.log('*** handle_view_membership_member_obj() ***');
membership_member_obj_view = membership_member_obj;
}
function handle_reset_view_membership_member_obj() {
console.log('*** handle_reset_view_membership_member_obj() ***');
membership_member_obj_view = null;
}
function handle_status_membership_member_obj(membership_member_obj, status) {
console.log('*** handle_status_membership_member_obj() ***');
// console.log(membership_member_obj);
// console.log(membership_member_obj_li.indexOf(membership_member_obj));
let index = membership_member_obj_li.indexOf(membership_member_obj);
// membership_member_obj_up = membership_member_obj_li[index];
let membership_member_id = membership_member_obj.membership_member_id_random;
let data = {}
// let status_name = null;
let current_datetime = new Date();
switch (status) {
case 'pending':
data = { 'status_id': 1, 'approved_on': null, 'start_on': null };
membership_member_obj_li[index].status_id = 1;
membership_member_obj_li[index].status_name = 'Pending';
membership_member_obj_li[index].approved_on = null;
membership_member_obj_li[index].start_on = null;
break;
case 'approve':
data = { 'status_id': 3, 'approved_on': current_datetime };
membership_member_obj_li[index].status_id = 3;
membership_member_obj_li[index].status_name = 'Approved';
membership_member_obj_li[index].approved_on = current_datetime;
break;
case 'reject':
data = { 'status_id': 4, 'approved_on': null, 'start_on': null };
membership_member_obj_li[index].status_id = 4;
membership_member_obj_li[index].status_name = 'Rejected';
membership_member_obj_li[index].approved_on = null;
membership_member_obj_li[index].start_on = null;
break;
case 'active':
data = { 'status_id': 5, 'start_on': current_datetime };
membership_member_obj_li[index].status_id = 5;
membership_member_obj_li[index].status_name = 'Active';
membership_member_obj_li[index].start_on = current_datetime;
if (!membership_member_obj_li[index].first_start_on) {
data['first_start_on'] = current_datetime;
membership_member_obj_li[index].first_start_on = current_datetime;
}
break;
}
promise_request_obj_up = update_membership_member_obj(membership_member_id, data);
// membership_member_obj.status_id = data['status_id'];
// membership_member_obj.status_name = status_name;
// membership_member_obj.approved_on = data['approved_on'];
// let array_index = membership_member_obj_li.indexOf(membership_member_obj);
// membership_member_obj_up.status_id = data['status_id'];
// membership_member_obj_up.status_name = status_name;
// membership_member_obj_up.approved_on = data['approved_on'];
// membership_member_obj_li = membership_member_obj_li.filter(log_client_viewing => log_client_viewing !== rm_log_client_viewing);
}
async function update_membership_member_obj(membership_member_id, data) {
console.log('*** update_membership_member_obj() ***');
let endpoint = `/membership/member/${membership_member_id}`;
let membership_member_obj_up_resp = await update_object({endpoint:endpoint, record:data});
console.log(membership_member_obj_up_resp);
// membership_member_obj_li = membership_member_obj_up_resp;
}
</script>
<div>
<header>
<h2>{name}</h2>
</header>
<button on:click={handle_get_membership_member_obj_li}>
Load Membership Member List
</button>
<div class="membership_member_obj_li">
{#if membership_member_obj_li}
{#await membership_member_obj_li}
<div>Loading...</div>
{:then result}
<!-- <div>Loaded</div> -->
{:catch error}
<div class="error">{error.message}</div>
{/await}
<table class="table_borders membership_member_obj_tbl table_alt_rows">
<tr>
<th>Actions</th>
<!-- <th>Index</th> -->
<th>ID</th>
<th>Type</th>
<th>Status</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
<th>Approved</th>
<th>First Start On</th>
<th>Current Start On</th>
</tr>
{#each membership_member_obj_li as membership_member_obj, index}
<tr key={membership_member_obj.membership_member_id_random} class="record">
<td>
<button on:click={handle_view_membership_member_obj(membership_member_obj)}><span class="fas fa-eye"></span></button>
</td>
<!-- <td>{index}</td> -->
<td class="id_random">{membership_member_obj.membership_member_id_random}</td>
<td class="type_name">{membership_member_obj.type_name}</td>
<td class="status_name">
{membership_member_obj.status_name}
{#if membership_member_obj.status_name === 'Pending'}
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'approve')} title="Set to approved"><span class="fas fa-user-check"></span></button>
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'reject')} title="Set to rejected"><span class="fas fa-user-times"></span></button>
{:else if membership_member_obj.status_name === 'Rejected'}
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'pending')} title="Set to pending"><span class="fas fa-user-lock"></span></button>
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'reject')} title="Set to rejected"><span class="fas fa-user-times"></span></button>
{:else if membership_member_obj.status_name === 'Approved'}
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'reject')} title="Set to rejected"><span class="fas fa-user-times"></span></button>
<button on:click={handle_status_membership_member_obj(membership_member_obj, 'active')} title="Set to active"><span class="fas fa-user-check"></span></button>
{/if}
</td>
<td class="full_name">{membership_member_obj.person.full_name}</td>
<td class="username">{membership_member_obj.user.username}</td>
<td class="email">{membership_member_obj.user.email}</td>
<td class="approved_on">{iso_datetime_formatter(membership_member_obj.approved_on,'datetime_short')}</td>
<td class="first_start_on">{iso_datetime_formatter(membership_member_obj.first_start_on,'datetime_short')}</td>
<td class="start_on">{iso_datetime_formatter(membership_member_obj.start_on,'datetime_short')}</td>
</tr>
{/each}
</table>
{:else}
<div>Nothing loaded yet</div>
{/if}
{#await promise_request_obj_del}
<div>Deleting...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
{#await promise_request_obj_up}
<div>Updating...</div>
{:then result}
{:catch error}
<div class="error">{error.message}</div>
{/await}
{#if membership_member_obj_view}
<div transition:fade="{{ duration: 200 }}" class="modal_container">
<div class="modal_content">
<header class="modal_header">
<section class="modal_header_begin">
<h3 class="modal_title">{membership_member_obj_view.person.full_name} ({membership_member_obj_view.user.username})</h3>
<div>{membership_member_obj_view.membership_member_id_random}</div>
</section>
<section class="modal_header_end">
<button on:click={handle_reset_view_membership_member_obj(membership_member_obj_view)} class="modal_close"><span class="fas fa-window-close"></span> Close</button>
</section>
</header>
<section class="modal_body">
<div>Approved on: {iso_datetime_formatter(membership_member_obj_view.approved_on,'datetime_short')}</div>
<div>Created/Updated: {iso_datetime_formatter(membership_member_obj_view.created_on,'datetime_short')} / {iso_datetime_formatter(membership_member_obj_view.updated_on,'datetime_short')}</div>
</section>
<footer class="modal_footer">
<section class="modal_footer_begin">
<div class="load_datetime"><span class="label">Loaded:</span> <span class="datetime">{new Date()}</span></div>
</section>
<section class="modal_footer_end">
<button on:click={handle_reset_view_membership_member_obj(membership_member_obj_view)} class="modal_close"><span class="fas fa-window-close"></span> Close</button>
</section>
</footer>
</div>
</div>
{:else}
<div>Select an entry above</div>
{/if}
</div>
</div>
<style>
.membership_member_obj_tbl tr:hover {
background-color: hsla(0, 25%, 90%, 1);
}
.membership_member_obj_tbl {
font-size: .8rem;
}
.record .id_random {
font-size: .5rem;
}
/* .record_details {
display: fixed;
top: 1rem;
right: 1rem;
bottom: 1rem;
left: 1rem;
border: solid thin hsla(0, 0%, 50%, 1);
} */
</style>