SRSoftware/Umbrella
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

cleaning up javascript code

Browse Source
This commit is contained in:
Stephan Richter
2025-07-29 09:01:37 +02:00
parent 89abbf5c62
commit 90a936b07f
13 changed files with 138 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/Components/Autocomplete.svelte
View File

@@ -1,29 +1,29 @@
<script> <script>
import { t } from '../translations.svelte.js' import { t } from '../translations.svelte.js'
import { tick } from "svelte"; import { tick } from "svelte";
let { let {
getCandidates = text => {}, getCandidates = text => {},
onSelect = text => [] onSelect = text => []
} = $props(); } = $props();
let text = $state('') const ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
let options = $state({}); let options = $state({});
let text = $state('')
async function ondblclick(evt){ async function ondblclick(evt){
var select = evt.target; const select = evt.target;
let key = select.value; const key = select.value;
text = options[key]; text = options[key];
let result = {}; let result = {};
result[key]=text; result[key] = text;
options={}; options = {};
onSelect(result); onSelect(result);
} }
async function onkeyup(evt){ async function onkeyup(evt){
var select = evt.target; const select = evt.target;
var key = evt.key; const key = evt.key;
var ignore = ['Escape','Tab','ArrowUp','ArrowLeft','ArrowRight']
if (ignore.includes(key)) return; if (ignore.includes(key)) return;
if (key == 'ArrowDown'){ if (key == 'ArrowDown'){
if (select.selectedIndex == 0) select.selectedIndex=1; if (select.selectedIndex == 0) select.selectedIndex=1;
@@ -34,12 +34,11 @@
return; return;
} }
if (key == 'Backspace'){ if (key == 'Backspace'){
text = text.substring(0,text.length-1) text = text.substring(0,text.length-1)
} else if (key.length<2){ } else if (key.length<2){
text += evt.key text += evt.key
} }
options = await getCandidates(text); options = await getCandidates(text);
console.log({options:options})
await tick(); await tick();
for (let o of select.getElementsByTagName('option')) o.selected = false; for (let o of select.getElementsByTagName('option')) o.selected = false;
} }

22
frontend/src/Components/CompanySelector.svelte
View File

@@ -1,20 +1,25 @@
<script> <script>
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import {t} from '../translations.svelte.js'; import { api } from '../urls.svelte.js';
let { caption, onselect = (company) => console.log('selected '+company.name) } = $props(); import {t} from '../translations.svelte.js';
let message = t('loading');
let companies = $state(null);
let value = 0;
let {
caption,
onselect = (company) => console.log('selected '+company.name)
} = $props();
let companies = $state(null);
let message = t('loading');
let value = 0;
let sortedCompanies = $derived.by(() => Object.values(companies).sort((a, b) => a.name.localeCompare(b.name))); let sortedCompanies = $derived.by(() => Object.values(companies).sort((a, b) => a.name.localeCompare(b.name)));
async function loadCompanies(){ async function loadCompanies(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`; const url = api('company/list');
var resp = await fetch(url,{ credentials: 'include'}); const resp = await fetch(url,{ credentials: 'include'});
if (resp.ok){ if (resp.ok){
companies = await resp.json(); companies = await resp.json();
} else { } else {
message = await resp.text(); message = await resp.text();
} }
} }
@@ -23,7 +28,6 @@
} }
onMount(loadCompanies) onMount(loadCompanies)
</script> </script>
{#if companies} {#if companies}

22
frontend/src/Components/ContactSelector.svelte
View File

@@ -1,18 +1,25 @@
<script> <script>
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import {t} from '../translations.svelte.js';
let { caption, onselect = (contact) => console.log('selected '+contact.FN||contact.ORG) } = $props(); import {api} from '../urls.svelte.js';
let message = t('loading'); import {t} from '../translations.svelte.js';
let {
caption,
onselect = (contact) => console.log('selected '+contact.FN||contact.ORG)
} = $props();
let contacts = $state(null); let contacts = $state(null);
let value = 0; let message = t('loading');
let value = 0;
async function loadContacts(){ async function loadContacts(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/contacts`; const url = api('document/contacts');
var resp = await fetch(url,{ credentials: 'include'}); const resp = await fetch(url,{ credentials: 'include'});
if (resp.ok){ if (resp.ok){
contacts = await resp.json(); contacts = await resp.json();
} else { } else {
message = await resp.text(); message = await resp.text();
} }
} }
@@ -21,7 +28,6 @@
} }
onMount(loadContacts) onMount(loadContacts)
</script> </script>
{#if contacts} {#if contacts}

15
frontend/src/Components/LineEditor.svelte
View File

@@ -4,15 +4,15 @@
let { let {
editable = false, editable = false,
onclick = evt => { startEdit() }, onclick = evt => { startEdit() },
onSet = newVal => {return true;}, onSet = newVal => {return true;},
type = 'div', type = 'div',
value = $bindable(null) value = $bindable(null)
} = $props(); } = $props();
let editing = $state(false);
let editing = $state(false);
let editValue = value; let editValue = value;
let start = 0; let start = 0;
async function applyEdit(){ async function applyEdit(){
let success = await onSet(editValue); let success = await onSet(editValue);
@@ -21,7 +21,7 @@
} }
function resetEdit(){ function resetEdit(){
editing = false; editing = false;
editValue = value; editValue = value;
} }
@@ -63,7 +63,6 @@
measured(evt, evt.timeStamp - start); measured(evt, evt.timeStamp - start);
} }
activeField.subscribe((val) => resetEdit()); activeField.subscribe((val) => resetEdit());
</script> </script>

20
frontend/src/Components/Login.svelte
View File

@@ -1,12 +1,14 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from '../translations.svelte.js';
import { checkUser, tryLogin } from '../user.svelte.js';
import { useTinyRouter } from 'svelte-tiny-router'; import { useTinyRouter } from 'svelte-tiny-router';
import { api } from '../urls.svelte.js';
import { checkUser, tryLogin } from '../user.svelte.js';
import { t } from '../translations.svelte.js';
let credentials = $state({ username : null, password : null }); let credentials = $state({ username : null, password : null });
let services = $state([]); const router = useTinyRouter();
const router = useTinyRouter(); let services = $state([]);
function doLogin(ev){ function doLogin(ev){
ev.preventDefault(); ev.preventDefault();
@@ -19,7 +21,7 @@
onMount(async () => { onMount(async () => {
await checkUser(); await checkUser();
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/buttons`; const url = api('user/oidc/buttons');
const resp = await fetch(url,{credentials:'include'}); const resp = await fetch(url,{credentials:'include'});
if (resp.ok){ if (resp.ok){
const json = await resp.json(); const json = await resp.json();
@@ -28,12 +30,12 @@
}); });
async function redirectTo(service){ async function redirectTo(service){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/oidc/redirect/${service}`; const url = api(`user/oidc/redirect/${service}`);
const resp = await fetch(url,{credentials:'include'}); const resp = await fetch(url,{credentials:'include'});
if (resp.ok){ if (resp.ok){
var json = await resp.json(); const json = await resp.json();
if (json.authorization_endpoint) { if (json.authorization_endpoint) {
var endpoint = json.authorization_endpoint; const endpoint = json.authorization_endpoint;
delete json.authorization_endpoint; delete json.authorization_endpoint;
location.href = endpoint + '?' + new URLSearchParams(json); location.href = endpoint + '?' + new URLSearchParams(json);
} }

31
frontend/src/Components/MarkdownEditor.svelte
View File

@@ -1,34 +1,33 @@
<script> <script>
import { activeField } from './field_sync.svelte.js'; import { activeField } from './field_sync.svelte.js';
import { t } from '../translations.svelte.js'; import { api } from '../urls.svelte.js';
import { t } from '../translations.svelte.js';
let { let {
editable = true, editable = true,
onclick = evt => {}, onclick = evt => {},
onSet = newVal => {return true;}, onSet = newVal => {return true;},
simple = false, simple = false,
type = 'div', type = 'div',
value = $bindable({source:null,rendered:null}) value = $bindable({source:null,rendered:null})
} = $props(); } = $props();
let editing = $state(false); let editing = $state(false);
let editValue = $state({source:value.source,rendered:value.rendered}); let editValue = $state({source:value.source,rendered:value.rendered});
let start = 0;
let timer = null; let timer = null;
let start = 0;
async function applyEdit(){ async function applyEdit(){
let success = await onSet(editValue.source); let success = await onSet(editValue.source);
if (success) { if (success) {
value.source = editValue.source; value.source = editValue.source;
value.rendered = editValue.rendered; value.rendered = editValue.rendered;
editing = false; editing = false;
} else resetEdit(); } else resetEdit();
} }
function resetEdit(){ function resetEdit(){
editing = false; editing = false;
editValue = {source:value.source,rendered:value.rendered}; editValue = {source:value.source,rendered:value.rendered};
} }
@@ -38,7 +37,7 @@
} }
async function render(){ async function render(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/markdown/render`; const url = api('markdown/render');
const resp = await fetch(url,{ const resp = await fetch(url,{
credentials: 'include', credentials: 'include',
method: 'POST', method: 'POST',
@@ -49,7 +48,7 @@
function typed(ev){ function typed(ev){
if (simple) { if (simple) {
value.source = editValue.source; value.source = editValue.source;
value.rendered = editValue.rendered; value.rendered = editValue.rendered;
} }
if (ev.keyCode == 13 && ev.ctrlKey){ if (ev.keyCode == 13 && ev.ctrlKey){

23
frontend/src/Components/MemberEditor.svelte
View File

@@ -1,23 +1,27 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from '../translations.svelte.js';
import Autocomplete from './Autocomplete.svelte'; import { api } from '../urls.svelte.js';
import { t } from '../translations.svelte.js';
import Autocomplete from './Autocomplete.svelte';
import PermissionSelector from './PermissionSelector.svelte'; import PermissionSelector from './PermissionSelector.svelte';
let { let {
members, members,
getCandidates = text => {}, getCandidates = text => {},
updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`), updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`),
dropMember = (member) => console.log(`no handler for dropMember(${member})`), dropMember = (member) => console.log(`no handler for dropMember(${member})`),
addMember = (entry) => console.log(`no handler for addMember(${entry})`) addMember = (entry) => console.log(`no handler for addMember(${entry})`)
} = $props(); } = $props();
let error = $state(null);
let error = $state(null);
let permissions = $state(null);
let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name))); let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));
let permissions = $state(null);
async function loadPermissions(){ async function loadPermissions(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/permissions`; const url = api('task/permissions');
var resp = await fetch(url,{credentials: 'include'}); const resp = await fetch(url,{credentials: 'include'});
if (resp.ok){ if (resp.ok){
permissions = await resp.json(); permissions = await resp.json();
} else { } else {
@@ -30,7 +34,6 @@
} }
onMount(loadPermissions); onMount(loadPermissions);
</script> </script>
{#if error} {#if error}

11
frontend/src/Components/Menu.svelte
View File

@@ -1,15 +1,16 @@
<script> <script>
import { logout, user } from '../user.svelte.js'; import { onMount } from 'svelte';
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router'; import { useTinyRouter } from 'svelte-tiny-router';
import { t } from '../translations.svelte.js';
const router = useTinyRouter(); import { api } from '../urls.svelte.js';
import { logout, user } from '../user.svelte.js';
import { t } from '../translations.svelte.js';
const router = useTinyRouter();
const modules = $state([]); const modules = $state([]);
async function fetchModules(){ async function fetchModules(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/modules`; const url = api('/legacy/modules');
const resp = await fetch(url,{credentials:'include'}); const resp = await fetch(url,{credentials:'include'});
if (resp.ok){ if (resp.ok){
const arr = await resp.json(); const arr = await resp.json();

18
frontend/src/Components/MultilineEditor.svelte
View File

@@ -1,19 +1,19 @@
<script> <script>
import { activeField } from './field_sync.svelte.js'; import { activeField } from './field_sync.svelte.js';
import { t } from '../translations.svelte.js'; import { t } from '../translations.svelte.js';
let { let {
editable = false, editable = false,
onclick = evt => {}, onclick = evt => {},
onSet = newVal => {return true;}, onSet = newVal => {return true;},
type = 'div', type = 'div',
value = $bindable(null) value = $bindable(null)
} = $props(); } = $props();
let editing = $state(false); let editing = $state(false);
let editValue = $state(value); let editValue = $state(value);
let timer = null; let timer = null;
let start = 0; let start = 0;
async function applyEdit(){ async function applyEdit(){
let success = await onSet(editValue); let success = await onSet(editValue);
@@ -22,7 +22,7 @@
} }
function resetEdit(){ function resetEdit(){
editing = false; editing = false;
editValue = value; editValue = value;
} }

5
frontend/src/Components/PermissionSelector.svelte
View File

@@ -1,8 +1,9 @@
<script> <script>
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import {t} from '../translations.svelte.js'; import {t} from '../translations.svelte.js';
let { let {
caption = t('select_permission'), caption = t('select_permission'),
selected = $bindable(0), selected = $bindable(0),
onchange = (val) => console.log('changed to',val), onchange = (val) => console.log('changed to',val),
permissions = null permissions = null

11
frontend/src/Components/PriceEditor.svelte
View File

@@ -1,9 +1,14 @@
<script> <script>
import { activeField } from './field_sync.svelte.js'; import { activeField } from './field_sync.svelte.js';
let { editable = false, currency, value = $bindable(null), onSet = (newVal) => {} } = $props(); let {
let editing = $state(false); editable = false,
currency,
onSet = (newVal) => {},
value = $bindable(null)
} = $props();
let editing = $state(false);
let editValue = value/100; let editValue = value/100;
async function applyEdit(){ async function applyEdit(){
@@ -14,7 +19,7 @@
function resetEdit(){ function resetEdit(){
editValue = value/100; editValue = value/100;
editing = false; editing = false;
} }
function startEdit(){ function startEdit(){

17
frontend/src/Components/StateSelector.svelte
View File

@@ -1,20 +1,21 @@
<script> <script>
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import {t} from '../translations.svelte.js'; import {api} from '../urls.svelte.js';
import {api} from '../urls.svelte.js'; import {t} from '../translations.svelte.js';
let { let {
caption = t('select_state'), caption = t('select_state'),
selected = $bindable(0), selected = $bindable(0),
onchange = (val) => console.log('changed to '+val), onchange = (val) => console.log('changed to '+val),
project_id = '?' project_id = '?'
} = $props(); } = $props();
let message = $state(t('loading')); let message = $state(t('loading'));
let states = $state(null); let states = $state(null);
async function loadStates(){ async function loadStates(){
const url = api(`project/${project_id}/states`); const url = api(`project/${project_id}/states`);
var resp = await fetch(url,{credentials: 'include'}); const resp = await fetch(url,{credentials: 'include'});
if (resp.ok){ if (resp.ok){
states = await resp.json(); states = await resp.json();
} else { } else {

28
frontend/src/routes/document/Add.svelte
View File

@@ -1,13 +1,17 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from '../../translations.svelte.js';
import { useTinyRouter } from 'svelte-tiny-router'; import { useTinyRouter } from 'svelte-tiny-router';
import ContactSelector from '../../Components/ContactSelector.svelte';
let router = useTinyRouter(); import { api } from '../../urls.svelte.js';
import { t } from '../../translations.svelte.js';
import ContactSelector from '../../Components/ContactSelector.svelte';
let company = $state(null); let company = $state(null);
let error = $state(null);
let docType = $state(null); let docType = $state(null);
let error = $state(null);
let router = useTinyRouter();
let document = $state({ let document = $state({
type : +router.query.document_type, type : +router.query.document_type,
customer : { customer : {
@@ -20,11 +24,11 @@
}); });
async function loadCompanies(){ async function loadCompanies(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`; const url = api('company/list');
var resp = await fetch(url,{ credentials: 'include'}); const resp = await fetch(url,{ credentials: 'include'});
if (resp.ok){ if (resp.ok){
const companies = await resp.json(); const companies = await resp.json();
company = companies[document.sender.company]; company = companies[document.sender.company];
document.sender.name = ''; document.sender.name = '';
if (company.name) document.sender.name += company.name+"\n"; if (company.name) document.sender.name += company.name+"\n";
if (company.address) document.sender.name += company.address+"\n"; if (company.address) document.sender.name += company.address+"\n";
@@ -37,8 +41,8 @@
} }
async function loadDocType(){ async function loadDocType(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document/types`; const url = api('document/types');
var resp = await fetch(url,{ credentials: 'include'}); const resp = await fetch(url,{ credentials: 'include'});
if (resp.ok){ if (resp.ok){
const types = await resp.json(); const types = await resp.json();
docType = t('type_'+types[document.type]); docType = t('type_'+types[document.type]);
@@ -69,7 +73,7 @@
} }
async function submit(){ async function submit(){
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/document`; const url = api('document');
const resp = await fetch(url,{ const resp = await fetch(url,{
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',