sander
/
Digikam-FatClient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move debugging stuff out of index.

Browse Source
master
Sander Vocke 6 years ago
parent 508fa9feb5
commit 8b54ecb5b3
3 changed files with 178 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      src/debuggingpage.js
  2. 0
      src/index.css
  3. 177
      src/index.js

176
src/debuggingpage.js
Unescape View File

@ -0,0 +1,176 @@
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)])
.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);
var sql_album_query = maybe_album_query(q);
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 => {
console.log(photos);
this.setState({ done: true, photos: photos });
});
do_album_query(sql_album_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(albums => {
console.log(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>
</>
);

0
src/index.css
Unescape View File

177
src/index.js
Unescape View File

@ -1,181 +1,8 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { Fetch } from './fetch.js'; import { DebuggingPage } from './debuggingpage.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';
import './index.css';
import { thisExpression } from '@babel/types';
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)])
.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);
var sql_album_query = maybe_album_query(q);
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 => {
console.log(photos);
this.setState({ done: true, photos: photos });
});
do_album_query(sql_album_query, this.props.db, "/test_photos", "/test_photos_thumbs").then(albums => {
console.log(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} />
</>
)
ReactDOM.render( ReactDOM.render(
<> <><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>
</>,
document.getElementById('root') document.getElementById('root')
); );

Write Preview
Loading…
Cancel
Save