Sander Vocke
6 years ago
parent
d27ceea10f
commit
c5a1f5b0e2
4 changed files with 81 additions and 557 deletions
@ -1,174 +0,0 @@ |
||||
import React from 'react'; |
||||
import { Fetch } from './fetch.js'; |
||||
import { ProvideDB, DBQueryConsole, DBQueryBar, DBTypeEnum, DBSourceEnum } from './database.js'; |
||||
import { PhotoTableLine, MediaTableLine } from './media.js'; |
||||
import { do_image_query, do_album_query, image_query_with_where, user_query_from_search_string, maybe_image_query, maybe_album_query } from './queries.js'; |
||||
|
||||
const URLLoading = ({ url }) => <p>Loading: {url}</p>; |
||||
const URLError = ({ error }) => <p>Failed to load URL resource: {error.message}</p>; |
||||
const URLFinished = ({ url, data }) => <p>{url} was loaded: {data.byteLength} bytes received.</p>; |
||||
|
||||
const DBLoading = ({ sqlite_file }) => <p>Loading: {sqlite_file}</p>; |
||||
const DBError = ({ error }) => <p>Failed to load database: {error.message}</p>; |
||||
const DBFinished = ({ sqlite_file, db }) => <p>{sqlite_file} was loaded. Name: {db.state.db_name}. </p>; |
||||
|
||||
const TestFetch = ({ url }) => ( |
||||
<Fetch url={url}> |
||||
{({ loading, error, done, data }) => ( |
||||
<> |
||||
{loading && <URLLoading url={url} />} |
||||
{error && <URLError error={error} />} |
||||
{done && <URLFinished url={url} data={data} />} |
||||
</> |
||||
)} |
||||
</Fetch> |
||||
) |
||||
|
||||
export class PhotoFromDB extends React.Component { |
||||
state = { |
||||
done: false, |
||||
photo: false, |
||||
} |
||||
|
||||
componentDidMount() { |
||||
do_image_query(this.props.sql_query, this.props.database, "/test_photos", "/test_photos_thumbs").then(photos => { |
||||
this.setState({ done: true, photo: photos[0] }); |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<> |
||||
{!this.state.done && <p>>Querying photo from DB: {this.props.sql_query}</p> } |
||||
{this.state.photo && <PhotoTableLine photo={this.state.photo} />} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export class ImageWhereConsole extends React.Component { |
||||
state = { |
||||
processing: false, |
||||
result: false, |
||||
where: "", |
||||
} |
||||
|
||||
onQueryChangeHandler = whereclause => { this.setState({ where: whereclause }); } |
||||
onQuerySubmitHandler = () => { |
||||
this.setState({ processing: true, result: false }); |
||||
this.props.database.queries_async([image_query_with_where(this.state.where, this.props.database)]) |
||||
.then(result => { |
||||
this.setState({ processing: false, result: JSON.stringify(result) }); |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<> |
||||
<div> |
||||
<DBQueryBar onChange={this.onQueryChangeHandler} /> |
||||
<button onClick={this.onQuerySubmitHandler}>Submit</button> |
||||
<p>Result:</p> |
||||
{this.state.result && <p>{this.state.result}</p>} |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const MediaTable = ({ items }) => ( |
||||
<> |
||||
{ |
||||
items.map((value, index) => { |
||||
return value && <MediaTableLine media={value} /> |
||||
}) |
||||
} |
||||
</> |
||||
) |
||||
|
||||
export class TestDBStringQuery extends React.Component { |
||||
state = { |
||||
string: false, |
||||
query: false, |
||||
sql_image_query: false, |
||||
sql_album_query: false, |
||||
photos: false, |
||||
albums: false, |
||||
} |
||||
|
||||
onQueryChangeHandler = str => { this.setState({ string: str }); } |
||||
onQuerySubmitHandler = () => { |
||||
var q = user_query_from_search_string(this.state.string); |
||||
var sql_image_query = maybe_image_query(q, this.props.db); |
||||
var sql_album_query = maybe_album_query(q, this.props.db); |
||||
this.setState({ query: q, sql_image_query: sql_image_query, sql_album_query: sql_album_query, photos: false, albums: false }); |
||||
do_image_query(sql_image_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(photos => { |
||||
this.setState({ done: true, photos: photos }); |
||||
}); |
||||
do_album_query(sql_album_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(albums => { |
||||
this.setState({ done: true, albums: albums }); |
||||
}); |
||||
} |
||||
|
||||
render() { |
||||
|
||||
return ( |
||||
<> |
||||
<div> |
||||
<DBQueryBar onChange={this.onQueryChangeHandler}/> |
||||
<button onClick={this.onQuerySubmitHandler}>Submit</button> |
||||
{ this.state.photos && <p>Found {this.state.photos.length} photos.</p> } |
||||
{ this.state.photos && <MediaTable items={this.state.photos} /> } |
||||
{ this.state.albums && <p>Found {this.state.albums.length} albums.</p> } |
||||
{ this.state.albums && <MediaTable items={this.state.albums} /> } |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const TestDBFetch = ({ db }) => ( |
||||
<> |
||||
<h2>DB Query Console</h2> |
||||
<DBQueryConsole database={db} /> |
||||
<h2>Example photo from DB</h2> |
||||
<PhotoFromDB database={db} sql_query={image_query_with_where("")} /> |
||||
<h2>DB WHERE clause image search</h2> |
||||
<ImageWhereConsole database={db} /> |
||||
</> |
||||
) |
||||
|
||||
const TestDBPlayground = ({ db }) => ( |
||||
<> |
||||
<DBQueryConsole database={db} /> |
||||
</> |
||||
) |
||||
|
||||
export const DebuggingPage = () => ( |
||||
<> |
||||
<h1>Test file fetching:</h1> |
||||
<TestFetch url={process.env.PUBLIC_URL + "/stuff"} /> |
||||
<ProvideDB db_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} db_source_type={DBTypeEnum.SQLJS_SQLITE} db_target_type={DBTypeEnum.ALASQL_NATIVE} |
||||
db_source_name="sqlite_db" db_target_name="db" db_source={DBSourceEnum.ATTACHFILE}> |
||||
{({ loading, error, done, db }) => ( |
||||
|
||||
<> |
||||
{loading && <DBLoading sqlite_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} />} |
||||
{error && <DBError error={error} />} |
||||
{done && ( |
||||
<> |
||||
<DBFinished sqlite_file={process.env.PUBLIC_URL + "/test_photos_db/digikam4.db"} db={db} /> |
||||
<h1>IndexedDB playground:</h1> |
||||
<TestDBPlayground db={db} /> |
||||
<h1>Test DB fetching:</h1> |
||||
<TestDBFetch db={db} /> |
||||
<h1>Test queries:</h1> |
||||
<TestDBStringQuery db={db} /> |
||||
</> |
||||
) |
||||
} |
||||
</> |
||||
)} |
||||
</ProvideDB> |
||||
</> |
||||
); |
||||
Loading…
Reference in new issue