Initial commit
This commit is contained in:
Scott Idem
7
.directory
Normal file
7
.directory
Normal file
@@ -0,0 +1,7 @@
|
||||
[Dolphin]
|
||||
Timestamp=2021,7,8,11,31,30.712
|
||||
Version=4
|
||||
ViewMode=1
|
||||
|
||||
[Settings]
|
||||
HiddenFilesShown=true
|
||||
50
.gitignore
vendored
50
.gitignore
vendored
@@ -1,50 +1,4 @@
|
||||
# These are some examples of commonly ignored file patterns.
|
||||
# You should customize this list as applicable to your project.
|
||||
# Learn more about .gitignore:
|
||||
# https://www.atlassian.com/git/tutorials/saving-changes/gitignore
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
# Node artifact files
|
||||
node_modules/
|
||||
dist/
|
||||
|
||||
# Compiled Java class files
|
||||
*.class
|
||||
|
||||
# Compiled Python bytecode
|
||||
*.py[cod]
|
||||
|
||||
# Log files
|
||||
*.log
|
||||
|
||||
# Package files
|
||||
*.jar
|
||||
|
||||
# Maven
|
||||
target/
|
||||
dist/
|
||||
|
||||
# JetBrains IDE
|
||||
.idea/
|
||||
|
||||
# Unit test reports
|
||||
TEST*.xml
|
||||
|
||||
# Generated by MacOS
|
||||
.DS_Store
|
||||
|
||||
# Generated by Windows
|
||||
Thumbs.db
|
||||
|
||||
# Applications
|
||||
*.app
|
||||
*.exe
|
||||
*.war
|
||||
|
||||
# Large media files
|
||||
*.mp4
|
||||
*.tiff
|
||||
*.avi
|
||||
*.flv
|
||||
*.mov
|
||||
*.wmv
|
||||
|
||||
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
||||
105
README.md
Normal file
105
README.md
Normal file
@@ -0,0 +1,105 @@
|
||||
*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
|
||||
|
||||
---
|
||||
|
||||
# svelte app
|
||||
|
||||
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
|
||||
|
||||
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template svelte-app
|
||||
cd svelte-app
|
||||
```
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
Install the dependencies...
|
||||
|
||||
```bash
|
||||
cd svelte-app
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start [Rollup](https://rollupjs.org):
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
|
||||
|
||||
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
|
||||
|
||||
If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
|
||||
|
||||
## Building and running in production mode
|
||||
|
||||
To create an optimised version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
|
||||
|
||||
|
||||
## Single-page app mode
|
||||
|
||||
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
|
||||
|
||||
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
|
||||
|
||||
```js
|
||||
"start": "sirv public --single"
|
||||
```
|
||||
|
||||
## Using TypeScript
|
||||
|
||||
This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
|
||||
|
||||
```bash
|
||||
node scripts/setupTypeScript.js
|
||||
```
|
||||
|
||||
Or remove the script via:
|
||||
|
||||
```bash
|
||||
rm scripts/setupTypeScript.js
|
||||
```
|
||||
|
||||
## Deploying to the web
|
||||
|
||||
### With [Vercel](https://vercel.com)
|
||||
|
||||
Install `vercel` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g vercel
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
cd public
|
||||
vercel deploy --name my-project
|
||||
```
|
||||
|
||||
### With [surge](https://surge.sh/)
|
||||
|
||||
Install `surge` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g surge
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
surge public my-project.surge.sh
|
||||
```
|
||||
2338
package-lock.json
generated
Normal file
2338
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --single --port 5555",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"@tsconfig/svelte": "^1.0.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^1.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"sirv-cli": "^1.0.0"
|
||||
}
|
||||
}
|
||||
88
public/app_global.css
Normal file
88
public/app_global.css
Normal file
@@ -0,0 +1,88 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
/* width: 100%; */
|
||||
height: 100%;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/* color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; */
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: hsla(0, 0%, 5%, 1);
|
||||
/*text-transform: uppercase;*/
|
||||
/* font-size: 4rem; */
|
||||
/* font-weight: 100; */
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: hsla(0, 0%, 10%, 1);
|
||||
/*text-transform: uppercase;*/
|
||||
/* font-size: 4rem; */
|
||||
/* font-weight: 100; */
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
/* color: rgb(0,100,200);
|
||||
text-decoration: none; */
|
||||
}
|
||||
|
||||
a:hover {
|
||||
/* text-decoration: underline; */
|
||||
}
|
||||
|
||||
a:visited {
|
||||
/* color: rgb(0,80,160); */
|
||||
}
|
||||
|
||||
label {
|
||||
/* display: block; */
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
/* font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-padding: 0.4rem 0;
|
||||
padding: 0.4rem;
|
||||
margin: 0 0 0.5rem 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px; */
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: hsla(0, 0%, 50%, 1);
|
||||
}
|
||||
|
||||
button {
|
||||
/* color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none; */
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: hsla(0, 0%, 50%, 1);
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: hsla(0, 0%, 50%, 1);
|
||||
}
|
||||
|
||||
button:focus {
|
||||
/* border-color: #666; */
|
||||
}
|
||||
|
||||
button:hover {
|
||||
/* background-color: green; */
|
||||
}
|
||||
|
||||
#my_body {
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
35
public/index.html
Normal file
35
public/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Index - Svelte</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
|
||||
<link rel='stylesheet' href='https://static.oneskyit.com/css/global.css'>
|
||||
<link rel='stylesheet' href='/app_global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossorigin="anonymous"></script>
|
||||
<script defer src='https://static.oneskyit.com/js/utilities.js'></script>
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header><h1>Index - Dev Svelte App</h1></header>
|
||||
|
||||
<main>
|
||||
<a href="log_client_viewing">log_client_viewing</a>
|
||||
<a href="membership_member_manage">membership_member_manage</a>
|
||||
<a href="user_person">user_person</a>
|
||||
<div id="test_container" class="svelte_container">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
This is the footer
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
32
public/log_client_viewing.html
Normal file
32
public/log_client_viewing.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Log Client Viewing - Dev Svelte App</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
|
||||
<link rel='stylesheet' href='https://static.oneskyit.com/css/global.css'>
|
||||
<link rel='stylesheet' href='/app_global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossorigin="anonymous"></script>
|
||||
<script defer src='https://static.oneskyit.com/js/utilities.js'></script>
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
<script>
|
||||
let account_id = 'TblpWmPauKw';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header><h1>Log Client Viewing - Dev Svelte App</h1></header>
|
||||
|
||||
<main>
|
||||
<div id="log_client_viewing_list_container" class="svelte_container">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
public/membership_member_manage.html
Normal file
33
public/membership_member_manage.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Membership Member Manage - Dev Svelte App</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
|
||||
<link rel='stylesheet' href='https://static.oneskyit.com/css/global.css'>
|
||||
<link rel='stylesheet' href='/app_global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossorigin="anonymous"></script>
|
||||
<script defer src='https://static.oneskyit.com/js/utilities.js'></script>
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
<script>
|
||||
let account_id = '_PRgRxSkzu-Xg-V4Ft1RGg';
|
||||
let membership_member_id = '6jMd9WwnMbs';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header><h1>Membership Member Manage - Dev Svelte App</h1></header>
|
||||
|
||||
<main>
|
||||
<div id="membership_member_manage_container" class="svelte_container">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
public/user_person.html
Normal file
36
public/user_person.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>User Person - Dev Svelte App</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
|
||||
<link rel='stylesheet' href='https://static.oneskyit.com/css/global.css'>
|
||||
<link rel='stylesheet' href='/app_global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossorigin="anonymous"></script>
|
||||
<script defer src='https://static.oneskyit.com/js/utilities.js'></script>
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
<script>
|
||||
let account_id = '_PRgRxSkzu-Xg-V4Ft1RGg';
|
||||
let person_id = 'OfcrSXX_evI';
|
||||
let user_id = 'VMvg8X3QnZM';
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header><h1>User Person - Dev Svelte App</h1></header>
|
||||
|
||||
<main>
|
||||
<div id="user_container" class="svelte_container">
|
||||
</div>
|
||||
<div id="person_container" class="svelte_container">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
83
rollup.config.js
Normal file
83
rollup.config.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import css from 'rollup-plugin-css-only';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
function serve() {
|
||||
let server;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
stdio: ['ignore', 'inherit', 'inherit'],
|
||||
shell: true
|
||||
});
|
||||
|
||||
process.on('SIGTERM', toExit);
|
||||
process.on('exit', toExit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: 'src/main.ts',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
preprocess: sveltePreprocess({ sourceMap: !production }),
|
||||
compilerOptions: {
|
||||
// enable run-time checks when not in production
|
||||
dev: !production
|
||||
}
|
||||
}),
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
css({ output: 'bundle.css' }),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
typescript({
|
||||
sourceMap: !production,
|
||||
inlineSources: !production
|
||||
}),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
21
src/App.svelte
Normal file
21
src/App.svelte
Normal 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
75
src/App.svelte.bak
Normal 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
38
src/api_delete.js
Normal 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
52
src/api_get.js
Normal 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
45
src/api_patch.js
Normal 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
45
src/api_post.js
Normal 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
119
src/html_input_render_templates.js
Normal 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
37
src/input_element.svelte
Normal 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
176
src/log_client_viewing 2021-07-02.svelte.bak
Normal 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
260
src/log_client_viewing.svelte
Normal 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
56
src/main.ts
Normal 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
264
src/membership_member_manage.svelte
Normal 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
342
src/person.svelte
Normal 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
322
src/person.svelte.bak
Normal 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
13
src/test.svelte
Normal 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
264
src/user.svelte
Normal 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>
|
||||
8
svelte_aether_app.code-workspace
Normal file
8
svelte_aether_app.code-workspace
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
}
|
||||
6
tsconfig.json
Normal file
6
tsconfig.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||
}
|
||||
Reference in New Issue
Block a user