10499286139

Committed 21 Aug 2024 11:59PM UTC coverage: 25.53% (-2.0%) from 27.541%

Build # 10499286139

Build Type

push

github

Committed by

caleb531

Commit Message

Convert components to JSX

Run Details

72 of 100 branches covered (72.0%)

Branch coverage included in aggregate %.

0 of 743 new or added lines in 22 files covered. (0.0%)

54 existing lines in 21 files now uncovered.

386 of 1694 relevant lines covered (22.79%)

6.85 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/scripts/components/import.jsx

import m from "mithril";
import Story from "../models/story.js";
import ControlComponent from "./control.jsx";
import PanelComponent from "./panel.jsx";
import ProgressBarComponent from "./progress-bar.jsx";

class ImportComponent {
  oninit({ attrs: { app } }) {
    this.app = app;
    this.chosenFile = null;
    this.uploadProgress = null;
  }

  // Clear details of last upload when panel is closed
  onremove() {
    this.chosenFile = null;
    this.uploadProgress = null;
  }

  setChosenFile(chosenFile) {
    this.chosenFile = chosenFile;
    this.storyAdded = null;
    this.uploadProgress = null;
  }

  uploadChosenFile() {
    let reader = new FileReader();
    reader.onprogress = (event) => {
      this.uploadProgress = event.loaded / event.total;
      m.redraw();
    };
    reader.onload = (event) => {
      setTimeout(async () => {
        let story = new Story(JSON.parse(event.target.result));
        await this.app.addExistingStory(story);
        this.storyAdded = story;
        m.redraw();
        // Show success message for a brief moment, then close panel to take
        // user back to editor
        setTimeout(() => {
          PanelComponent.closeAllPanels();
          m.redraw();
        }, ProgressBarComponent.delay * 2);
      }, ProgressBarComponent.delay);
    };
    this.uploadProgress = 0;
    reader.readAsText(this.chosenFile);
  }

  view() {
    return (
      <div className="import-options">
        <h2>Import Story</h2>
        <div className="import-control-wrapper">
          <input
            type="file"
            accept=".flipbook"
            className="import-file-input"
            onchange={({ target }) => this.setChosenFile(target.files[0])}
          />
          <ControlComponent
            id="choose-file"
            title="Choose File"
            label="Choose File..."
          />
          <div className="import-chosen-file-name">
            {this.chosenFile ? this.chosenFile.name : "No file chosen"}
          </div>
        </div>
        <div className="import-footer">
          {this.storyAdded ? (
            <div className="import-success-message">
              "{this.storyAdded.metadata.name}" successfully added!
            </div>
          ) : (
            [
              this.uploadProgress === null ? (
                this.chosenFile ? (
                  <ControlComponent
                    id="upload-file"
                    title="Upload Now"
                    label="Upload Now"
                    action={() => this.uploadChosenFile()}
                  />
                ) : null
              ) : (
                <ProgressBarComponent progress={this.uploadProgress} />
              ),
            ]
          )}
        </div>
      </div>
    );
  }
}

export default ImportComponent;

NEW 1	import m from "mithril";	×
NEW 2	import Story from "../models/story.js";	×
NEW 3	import ControlComponent from "./control.jsx";	×
NEW 4	import PanelComponent from "./panel.jsx";	×
NEW 5	import ProgressBarComponent from "./progress-bar.jsx";	×
6
7	class ImportComponent {	×
NEW 8	oninit({ attrs: { app } }) {	×
9	this.app = app;	×
10	this.chosenFile = null;	×
11	this.uploadProgress = null;	×
12	}	×
13
14	// Clear details of last upload when panel is closed
15	onremove() {	×
16	this.chosenFile = null;	×
17	this.uploadProgress = null;	×
18	}	×
19
20	setChosenFile(chosenFile) {	×
21	this.chosenFile = chosenFile;	×
22	this.storyAdded = null;	×
23	this.uploadProgress = null;	×
24	}	×
25
26	uploadChosenFile() {	×
27	let reader = new FileReader();	×
28	reader.onprogress = (event) => {	×
29	this.uploadProgress = event.loaded / event.total;	×
30	m.redraw();	×
31	};	×
32	reader.onload = (event) => {	×
33	setTimeout(async () => {	×
34	let story = new Story(JSON.parse(event.target.result));	×
35	await this.app.addExistingStory(story);	×
36	this.storyAdded = story;	×
37	m.redraw();	×
38	// Show success message for a brief moment, then close panel to take
39	// user back to editor
40	setTimeout(() => {	×
41	PanelComponent.closeAllPanels();	×
42	m.redraw();	×
43	}, ProgressBarComponent.delay * 2);	×
44	}, ProgressBarComponent.delay);	×
45	};	×
46	this.uploadProgress = 0;	×
47	reader.readAsText(this.chosenFile);	×
48	}	×
49
50	view() {	×
NEW 51	return (	×
NEW 52	<div className="import-options">	×
NEW 53	<h2>Import Story</h2>	×
NEW 54	<div className="import-control-wrapper">	×
NEW 55	<input	×
NEW 56	type="file"	×
NEW 57	accept=".flipbook"	×
NEW 58	className="import-file-input"	×
NEW 59	onchange={({ target }) => this.setChosenFile(target.files[0])}	×
NEW 60	/>	×
NEW 61	<ControlComponent	×
NEW 62	id="choose-file"	×
NEW 63	title="Choose File"	×
NEW 64	label="Choose File..."	×
NEW 65	/>	×
NEW 66	<div className="import-chosen-file-name">	×
NEW 67	{this.chosenFile ? this.chosenFile.name : "No file chosen"}	×
NEW 68	</div>	×
NEW 69	</div>	×
NEW 70	<div className="import-footer">	×
NEW 71	{this.storyAdded ? (	×
NEW 72	<div className="import-success-message">	×
NEW 73	"{this.storyAdded.metadata.name}" successfully added!	×
NEW 74	</div>	×
75	) : (
NEW 76	[	×
NEW 77	this.uploadProgress === null ? (	×
NEW 78	this.chosenFile ? (	×
NEW 79	<ControlComponent	×
NEW 80	id="upload-file"	×
NEW 81	title="Upload Now"	×
NEW 82	label="Upload Now"	×
NEW 83	action={() => this.uploadChosenFile()}	×
NEW 84	/>	×
NEW 85	) : null	×
86	) : (
NEW 87	<ProgressBarComponent progress={this.uploadProgress} />	×
88	),
NEW 89	]	×
90	)}
NEW 91	</div>	×
NEW 92	</div>	×
93	);
UNCOV 94	}	×
UNCOV 95	}	×
96
97	export default ImportComponent;	×

caleb531 / flip-book / 10499286139

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous