git.iko.soy/astrolabe
on main help sign in
more ui fixes
0119107John Hyde
desk/desk.docket-0+1−1
compare with main
unifiedsplit
@@ -4,7 +4,7 @@
4 image+'https://raw.githubusercontent.com/johnhyde/astrolabe/main/ui/src/assets/astrolabe-tile.svg'
4 image+'https://raw.githubusercontent.com/johnhyde/astrolabe/main/ui/src/assets/astrolabe-tile.svg'
5 glob-ames+[~dister-midlev-mindyr 0v0]
5 glob-ames+[~dister-midlev-mindyr 0v0]
6 base+'astrolabe'
6 base+'astrolabe'
7− version+[0 1 2]
7+ version+[0 1 4]
8 website+'https://github.com/johnhyde/astrolabe'
8 website+'https://github.com/johnhyde/astrolabe'
9 license+'MIT'
9 license+'MIT'
10==
10==
ui/src/App.svelte+12−3
@@ -5,13 +5,22 @@
5 import HelpModal from './components/HelpModal.svelte';
5 import HelpModal from './components/HelpModal.svelte';
6 import "./styles/styles.scss";
6 import "./styles/styles.scss";
7
7
8+ // const routes = {
9+ // '/help/:path?': HelpPage,
10+ // // '/:patp?': Home,
11+ // '/ship/:patp?': Home,
12+ // '/search/:search?': Home,
13+ // '*': Home,
14+ // }
15+
8 const routes = {
16 const routes = {
9 '/help/:path?': HelpPage,
17 '/help/:path?': HelpPage,
10 // '/:patp?': Home,
18 // '/:patp?': Home,
11− '/ship/:patp?': Home,
19+ // '/ship/:patp?': Home,
12− '/search/:search?': Home,
20+ // '/search/:search?': Home,
13− '*': Home,
21+ '/:mode?/:arg?': Home,
14 }
22 }
23+
15 import pageName from './stores/pageName';
24 import pageName from './stores/pageName';
16
25
17 $: title = $pageName ? `Astrolabe - ${$pageName}` : 'Astrolabe';
26 $: title = $pageName ? `Astrolabe - ${$pageName}` : 'Astrolabe';
ui/src/components/SearchBar.svelte+13−10
@@ -6,21 +6,24 @@
6 export let searchQuery: RegExp = /~der/;
6 export let searchQuery: RegExp = /~der/;
7 export let analysis: SearchAnalysis = new SearchAnalysis();
7 export let analysis: SearchAnalysis = new SearchAnalysis();
8 export let search = '';
8 export let search = '';
9+ export let pauseAnalysis: boolean = false;
9 let debouncedSearch = search;
10 let debouncedSearch = search;
10
11
11 const placeholderText = "Search by @p or #. '*' matches any character";
12 const placeholderText = "Search by @p or #. '*' matches any character";
12
13
13 $: {
14 $: {
15+ if (!pauseAnalysis) {
14− analysis = new SearchAnalysis(debouncedSearch);
16+ analysis = new SearchAnalysis(debouncedSearch);
15− if (analysis.queryIsValid) {
17+ if (analysis.queryIsValid) {
16− searchQuery = analysis.query;
18+ searchQuery = analysis.query;
17− } else {
19+ } else {
18− searchQuery = undefined;
20+ searchQuery = undefined;
19− }
21+ }
20− if (analysis.patpIsValid) {
22+ if (analysis.patpIsValid) {
21− patp = analysis.patp;
23+ patp = analysis.patp;
22− } else {
24+ } else {
23− patp = undefined;
25+ patp = undefined;
26+ }
24 }
27 }
25 }
28 }
26
29
ui/src/components/SearchResults.svelte+25−11
@@ -11,12 +11,14 @@
11 export let search: string;
11 export let search: string;
12 // export let patp: string;
12 // export let patp: string;
13 let combinedSearchResults = [];
13 let combinedSearchResults = [];
14+ let searchedPointsP: Promise<any>;
14 let searchedPoints: Patp[] = [];
15 let searchedPoints: Patp[] = [];
15 let selectedShipIndex: number;
16 let selectedShipIndex: number;
16 let page: number = 0;
17 let page: number = 0;
17 let pageSize: number = 50;
18 let pageSize: number = 50;
18 let totalPages, firstItemOnPage;
19 let totalPages, firstItemOnPage;
19− let searchStatus: ('init' | 'prog' | 'done' | 'fail') = 'init';
20+ type status = ('init' | 'prog' | 'done' | 'fail');
21+ let searchStatus: status = 'init';
20 let notification: string = null;
22 let notification: string = null;
21
23
22 let timer;
24 let timer;
@@ -26,17 +28,27 @@
26 searchedContacts.search(query);
28 searchedContacts.search(query);
27 }, 1000);
29 }, 1000);
28 }
30 }
29− $: searchedPointsP = searchPoints(search);
31+ function doSearch() {
30− $: {
32+ const searchSnap = search;
31 searchStatus = 'prog';
33 searchStatus = 'prog';
34+ console.log(`starting search for "${searchSnap}"`);
35+ searchedPointsP = searchPoints(searchSnap);
32 searchedPointsP.then((points) => {
36 searchedPointsP.then((points) => {
37+ if (search === searchSnap) {
33− searchedPoints = points;
38+ searchedPoints = points;
34− searchStatus = 'done';
39+ searchStatus = 'done';
40+ console.log(`done searching for "${searchSnap}"`);
41+ } else {
42+ console.log(`throwing out results for outdated search "${searchSnap}" (currently on ${search})`);
43+ }
35 }).catch((err) => {
44 }).catch((err) => {
45+ if (search === searchSnap) {
36− searchedPoints = [];
46+ searchedPoints = [];
37− searchStatus = 'fail';
47+ searchStatus = 'fail';
48+ }
38 });
49 });
39 }
50 }
51+ $: search, doSearch();
40
52
41 $: {
53 $: {
42 const contactSearchResults: Rolodex = JSON.parse(JSON.stringify($searchedContacts));
54 const contactSearchResults: Rolodex = JSON.parse(JSON.stringify($searchedContacts));
@@ -67,10 +79,12 @@
67 $: {
79 $: {
68 totalPages = Math.ceil(combinedSearchResults.length / pageSize);
80 totalPages = Math.ceil(combinedSearchResults.length / pageSize);
69 firstItemOnPage = page * pageSize;
81 firstItemOnPage = page * pageSize;
82+ if (combinedSearchResults.length > 0) {
70− if (firstItemOnPage >= combinedSearchResults.length) {
83+ if (firstItemOnPage >= combinedSearchResults.length) {
71− page = totalPages - 1;
84+ page = totalPages - 1;
72− } else if (firstItemOnPage < 0) {
85+ } else if (firstItemOnPage < 0) {
73− page = 0;
86+ page = 0;
87+ }
74 }
88 }
75 }
89 }
76 $: pageResults = combinedSearchResults.slice(firstItemOnPage, (page + 1) * pageSize);
90 $: pageResults = combinedSearchResults.slice(firstItemOnPage, (page + 1) * pageSize);
ui/src/routes/Home.svelte+100−29
@@ -1,5 +1,6 @@
1<script lang="ts">
1<script lang="ts">
2+ import Router from 'svelte-spa-router';
2− import { link, push, replace, querystring } from 'svelte-spa-router'
3+ import { link, push, replace, location, querystring } from 'svelte-spa-router'
3 import pageName from '../stores/pageName';
4 import pageName from '../stores/pageName';
4 import { SearchAnalysis } from '../lib/id';
5 import { SearchAnalysis } from '../lib/id';
5 import { linkToShip } from '../lib/link';
6 import { linkToShip } from '../lib/link';
@@ -10,41 +11,107 @@
10 import HomeScreenTiles from '../components/HomeScreenTiles.svelte';
11 import HomeScreenTiles from '../components/HomeScreenTiles.svelte';
11 export let params: any = {};
12 export let params: any = {};
12 let analysis: SearchAnalysis = new SearchAnalysis();
13 let analysis: SearchAnalysis = new SearchAnalysis();
14+ let navigating = false;
13
15
14− $: querySearch = (new URLSearchParams($querystring)).get('search');
16+ let search: string = (new URLSearchParams($querystring)).get('search') || params.arg || '';
15− function getSearch() {
17+ let urlSearch = search;
16− return querySearch || params.search || params.patp || '';
18+ // let urlChanged;
19+ let urlChangedSinceAnalysisPatp = false;
20+ $: {
21+ const potentialUrlSearch = (new URLSearchParams($querystring)).get('search') || params.arg || '';
22+ if (($location + $querystring).includes(potentialUrlSearch)) {
23+ urlSearch = potentialUrlSearch;
24+ // urlChanged = Date.now();
25+ urlChangedSinceAnalysisPatp = true;
26+ navigating = false;
27+ }
17 }
28 }
18− $: urlSearch = querySearch || params.search || params.patp || '';
19− let search: string = getSearch();
20− $: urlChanged = (urlSearch || true) && Date.now();
21− $: analysisPatpChanged = (analysis.patp || true) && Date.now();
22− $: urlChangedSinceAnalysisPatp = (urlChanged - analysisPatpChanged) > 1000;
23 $: {
29 $: {
30+ // analysisPatpChanged = (analysis.patp || true) && Date.now();
31+ urlChangedSinceAnalysisPatp = (analysis.patp || true) && false;
32+ }
33+ function nav(path, addToHistory = false) {
34+ (addToHistory ? push : replace)(path);
35+ }
36+ function navHome(addToHistory = false) {
37+ params.mode = null;
38+ params.arg = null;
39+ nav('/', addToHistory);
40+ }
41+ function navToShipView(addToHistory = false) {
42+ params.mode = 'ship';
43+ params.arg = analysis.patp;
44+ if (analysis.patp === search) {
45+ nav(linkToShip(analysis.patp), addToHistory);
46+ } else {
47+ nav(linkToShip(analysis.patp, { search }), addToHistory);
48+ }
49+ }
50+ function navToSearch(addToHistory = false) {
51+ if (!search) {
52+ navHome(addToHistory);
53+ } else if (analysis.queryIsValid) {
54+ params.mode = 'search';
55+ params.arg = search;
56+ nav(`/search/${search}`, addToHistory);
57+ }
58+ }
59+
60+ function navToMode(mode, addToHistory = false) {
61+ switch (mode) {
62+ case 'ship':
63+ navToShipView(addToHistory);
64+ break;
65+ case 'search':
66+ navToSearch(addToHistory);
67+ break;
68+ default:
69+ navHome(addToHistory);
70+ }
71+ }
72+ // $: urlChangedSinceAnalysisPatp = (urlChanged - analysisPatpChanged) > 1000;
73+ function doStuff() {
24 if (search !== urlSearch) {
74 if (search !== urlSearch) {
25 if (urlChangedSinceAnalysisPatp) {
75 if (urlChangedSinceAnalysisPatp) {
26 search = urlSearch;
76 search = urlSearch;
27 } else if (analysis.search === search) {
77 } else if (analysis.search === search) {
78+ navigating = true;
28 if (analysis.patpIsValid) {
79 if (analysis.patpIsValid) {
29− if (analysis.patp === search) {
80+ navToShipView(true);
30− push(linkToShip(analysis.patp));
31− } else {
32− push(linkToShip(analysis.patp, { search }));
33− }
34 } else {
81 } else {
35− const nav = params.patp !== undefined ? push : replace;
82+ navToSearch(params.mode === 'ship');
36− if (!search) {
37− nav('/');
38− } else if (analysis.queryIsValid) {
39− nav(`/search/${search}`);
40− }
41 }
83 }
42 }
84 }
43 }
85 }
44 }
86 }
87+ $: urlSearch, analysis, doStuff();
88+ $: {
89+ if (analysis.search === search) {
90+ let properMode = null;
91+ if (analysis.patpIsValid) {
92+ properMode = 'ship';
93+ } else if (analysis.search.length > 0) {
94+ properMode = 'search';
95+ }
96+ if (params.mode !== properMode) {
97+ navToMode(properMode, false);
98+ }
99+ }
100+ }
45
101
46 $: {
102 $: {
47− $pageName = params.patp !== undefined ? params.patp : (search ? 'Search' : null);
103+ if (analysis.search === urlSearch) {
104+ switch (params.mode) {
105+ case 'ship':
106+ $pageName = params.arg;
107+ break;
108+ case 'search':
109+ $pageName = 'Search';
110+ break;
111+ default:
112+ $pageName = null;
113+ }
114+ }
48 }
115 }
49
116
50
117
@@ -52,13 +119,17 @@
52
119
53<div class="m-4 flex flex-col items-center space-y-8 2xs:m-8">
120<div class="m-4 flex flex-col items-center space-y-8 2xs:m-8">
54 <SearchBar bind:analysis bind:search />
121 <SearchBar bind:analysis bind:search />
122+ <!-- <p class="bg-white">navigating</p> -->
55 {#if analysis.patpIsValid}
123 {#if analysis.patpIsValid}
124+ <!-- {#if analysis.search === urlSearch} -->
56− <ShipView patp={analysis.patp} />
125+ <ShipView patp={analysis.patp} />
126+ <!-- {/if} -->
57− {:else if (analysis.queryIsValid)}
127+ {:else if (analysis.queryIsValid)}
58− <SearchResults query={analysis.query} search={analysis.search} />
128+ <SearchResults query={analysis.query} search={analysis.search} />
59− {:else if (analysis.search.length > 0)}
129+ {:else if (analysis.search.length > 0)}
60− <ValidationProblems problems={analysis.queryProblems} />
130+ <ValidationProblems problems={analysis.queryProblems} />
61− {:else}
131+ {:else}
62− <HomeScreenTiles />
132+ <HomeScreenTiles />
133+ {/if}
63− {/if}
134+ <!-- {/if} -->
64</div>
135</div>