From c237b3b8231498bf1fbe6044abd2b62844f96d68 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Wed, 2 Apr 2025 00:48:43 +0000 Subject: [PATCH] remove wip component --- packages/app/src/settings/tap_share/index.jsx | 603 +++++++++--------- .../app/src/settings/tap_share/index.less | 402 ++++++------ 2 files changed, 490 insertions(+), 515 deletions(-) diff --git a/packages/app/src/settings/tap_share/index.jsx b/packages/app/src/settings/tap_share/index.jsx index eb38dde0..d77fef23 100755 --- a/packages/app/src/settings/tap_share/index.jsx +++ b/packages/app/src/settings/tap_share/index.jsx @@ -15,370 +15,349 @@ import StepsContext from "./context" import "./index.less" -const RegisterNewTagSteps = [ - CheckRegister, - DataEditor, - TagWritter, - Success, -] +const RegisterNewTagSteps = [CheckRegister, DataEditor, TagWritter, Success] const RegisterNewTag = (props) => { - const [step, setStep] = React.useState(0) - const [stepsValues, setStepsValues] = React.useState({ - ...props.tagData ?? {} - }) + const [step, setStep] = React.useState(0) + const [stepsValues, setStepsValues] = React.useState({ + ...(props.tagData ?? {}), + }) - const nextStep = () => { - setStep((step) => step + 1) - } + const nextStep = () => { + setStep((step) => step + 1) + } - const prevStep = () => { - setStep((step) => step - 1) - } + const prevStep = () => { + setStep((step) => step - 1) + } - const finish = () => { - if (typeof props.onFinish === "function") { - props.onFinish() - } + const finish = () => { + if (typeof props.onFinish === "function") { + props.onFinish() + } - if (typeof props.close === "function") { - props.close() - } - } + if (typeof props.close === "function") { + props.close() + } + } - // create a react context for the steps - const StepsContextValue = { - next: nextStep, - prev: prevStep, - values: stepsValues, - setValue: (key, value) => { - setStepsValues((stepsValues) => { - return { - ...stepsValues, - [key]: value - } - }) - }, - onFinish: finish, - nfcReader: app.cores.nfc.instance(), - close: props.close - } + // create a react context for the steps + const StepsContextValue = { + next: nextStep, + prev: prevStep, + values: stepsValues, + setValue: (key, value) => { + setStepsValues((stepsValues) => { + return { + ...stepsValues, + [key]: value, + } + }) + }, + onFinish: finish, + nfcReader: app.cores.nfc.instance(), + close: props.close, + } - if (props.tagData) { - return
-
- - - -
-
- } + if (props.tagData) { + return ( +
+
+ + + +
+
+ ) + } - if (app.cores.nfc.incompatible) { - return - } + if (app.cores.nfc.incompatible) { + return ( + + ) + } - return
0 - } - )} - > -
- } - className={classnames( - "tap-share-register-header-back", - { - ["hidden"]: step === 0 - } - )} - /> + return ( +
0, + })} + > +
+ } + className={classnames("tap-share-register-header-back", { + ["hidden"]: step === 0, + })} + /> -
- -
+
+ +
-

- Register new tag -

-
+

Register new tag

+
-
- - { - React.createElement(RegisterNewTagSteps[step]) - } - -
-
+
+ + {React.createElement(RegisterNewTagSteps[step])} + +
+
+ ) } const TagItem = (props) => { - return
-
- -
+ return ( +
+
+ +
-
-

- {props.tag.alias} -

+
+

{props.tag.alias}

- - {props.tag.serial} - -
+ {props.tag.serial} +
-
- } - onClick={props.onEdit} - /> - } - danger - onClick={props.onDelete} - /> -
-
+
+ } onClick={props.onEdit} /> + } + danger + onClick={props.onDelete} + /> +
+
+ ) } class OwnTags extends React.Component { - state = { - loading: true, - error: null, - data: null, - editorOpen: false, - } + state = { + loading: true, + error: null, + data: null, + editorOpen: false, + } - loadData = async () => { - this.setState({ - loading: true, - }) + loadData = async () => { + this.setState({ + loading: true, + }) - const result = await NFCModel.getOwnTags() - .catch((err) => { - console.error(err) - this.setState({ - error: err.message, - loading: false, - data: null - }) - return false - }) + const result = await NFCModel.getOwnTags().catch((err) => { + console.error(err) + this.setState({ + error: err.message, + loading: false, + data: null, + }) + return false + }) - if (!result) { - return false - } + if (!result) { + return false + } - this.setState({ - loading: false, - data: result, - error: null - }) - } + this.setState({ + loading: false, + data: result, + error: null, + }) + } - handleOpenEditor = (props) => { - this.setState({ - editorOpen: true - }) + handleOpenEditor = (props) => { + this.setState({ + editorOpen: true, + }) - OpenTagEditor({ - ...props, - onFinish: () => { - this.setState({ - editorOpen: false - }) + OpenTagEditor({ + ...props, + onFinish: () => { + this.setState({ + editorOpen: false, + }) - this.loadData() - } - }) - } + this.loadData() + }, + }) + } - handleTagDelete = (tag) => { - antd.Modal.confirm({ - title: "Are you sure you want to delete this tag?", - content: `This action cannot be undone.`, - onOk: async () => { - NFCModel.deleteTag(tag._id) - .then(() => { - app.message.success("Tag deleted") - this.loadData() - }) - .catch((err) => { - console.error(err) - app.message.error(err.message) - return false - }) - } - }) - } + handleTagDelete = (tag) => { + antd.Modal.confirm({ + title: "Are you sure you want to delete this tag?", + content: `This action cannot be undone.`, + onOk: async () => { + NFCModel.deleteTag(tag._id) + .then(() => { + app.message.success("Tag deleted") + this.loadData() + }) + .catch((err) => { + console.error(err) + app.message.error(err.message) + return false + }) + }, + }) + } - handleTagRead = async (error, tag) => { - if (this.state.editorOpen) { - return false - } + handleTagRead = async (error, tag) => { + if (this.state.editorOpen) { + return false + } - if (error) { - console.error(error) - return false - } + if (error) { + console.error(error) + return false + } - const ownedTag = this.state.data.find((ownedTag) => { - return ownedTag.serial === tag.serialNumber - }) + const ownedTag = this.state.data.find((ownedTag) => { + return ownedTag.serial === tag.serialNumber + }) - if (!ownedTag) { - app.message.error("This tag is not registered or you don't have permission to edit it.") - return false - } + if (!ownedTag) { + app.message.error( + "This tag is not registered or you don't have permission to edit it.", + ) + return false + } - return this.handleOpenEditor({ - tag: ownedTag - }) - } + return this.handleOpenEditor({ + tag: ownedTag, + }) + } - componentDidMount = async () => { - await this.loadData() + componentDidMount = async () => { + await this.loadData() - app.cores.nfc.subscribe(this.handleTagRead) - } + app.cores.nfc.subscribe(this.handleTagRead) + } - componentWillUnmount = () => { - app.cores.nfc.unsubscribe(this.handleTagRead) - } + componentWillUnmount = () => { + app.cores.nfc.unsubscribe(this.handleTagRead) + } - render() { - console.log(this.state) - if (this.state.loading) { - return
- -
- } + render() { + console.log(this.state) + if (this.state.loading) { + return ( +
+ +
+ ) + } - if (!this.state.data) { - return - } + if (!this.state.data) { + return + } - return
- { - this.state.data.length === 0 && - } + return ( +
+ {this.state.data.length === 0 && ( + + )} - { - this.state.data.length > 0 && this.state.data.map((tag) => { - return { - this.handleOpenEditor({ - tag: tag - }) - }} - onDelete={() => { - this.handleTagDelete(tag) - }} - /> - }) - } + {this.state.data.length > 0 && + this.state.data.map((tag) => { + return ( + { + this.handleOpenEditor({ + tag: tag, + }) + }} + onDelete={() => { + this.handleTagDelete(tag) + }} + /> + ) + })} - { - app.isMobile && } - onClick={() => this.handleOpenEditor({})} - className="tap-share-own_tags-add" - > - Add new - - } -
- } + {app.isMobile && ( + } + onClick={() => this.handleOpenEditor({})} + className="tap-share-own_tags-add" + > + Add new + + )} +
+ ) + } } -const OpenTagEditor = ({ tag, onFinish = () => app.navigation.softReload() } = {}) => { - if (!app.layout.draggable) { - return app.layout.drawer.open("tag_register", RegisterNewTag, { - props: { - onFinish: onFinish, - tagData: tag, - } - }) - } +const OpenTagEditor = ({ + tag, + onFinish = () => app.navigation.softReload(), +} = {}) => { + if (!app.layout.draggable) { + return app.layout.drawer.open("tag_register", RegisterNewTag, { + props: { + onFinish: onFinish, + tagData: tag, + }, + }) + } - return app.layout.draggable.open("tag_register", RegisterNewTag, { - componentProps: { - onFinish: onFinish, - tagData: tag, - } - }) + return app.layout.draggable.open("tag_register", RegisterNewTag, { + componentProps: { + onFinish: onFinish, + tagData: tag, + }, + }) } const TapShareRender = () => { - return
- { - !app.cores.nfc.scanning && app.isMobile && - } + return ( +
+ {!app.cores.nfc.scanning && app.isMobile && ( + + )} -
-
-

- Registered Tags -

-
+
+
+

+ Registered Tags +

+
- { - app.cores.nfc.scanning && - You can quickly edit your tags by tapping them. - - } + {app.cores.nfc.scanning && ( + + You can quickly edit your tags by + tapping them. + + )} - -
- -
-
-

- Your Badge -

-
- - -
-
+ +
+
+ ) } export default { - id: "tap_share", - icon: "MdNfc", - label: "Tap Share", - group: "app", - render: TapShareRender -} \ No newline at end of file + id: "tap_share", + icon: "MdNfc", + label: "Tap Share", + group: "app", + render: TapShareRender, +} diff --git a/packages/app/src/settings/tap_share/index.less b/packages/app/src/settings/tap_share/index.less index 179dd5d2..59a1d4b3 100755 --- a/packages/app/src/settings/tap_share/index.less +++ b/packages/app/src/settings/tap_share/index.less @@ -1,290 +1,286 @@ .tap-share-render { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - gap: 20px; + gap: 20px; - .tap-share-field { - display: flex; - flex-direction: column; + .tap-share-field { + display: flex; + flex-direction: column; - background-color: var(--background-color-accent); - padding: 20px; + background-color: var(--background-color-accent); + padding: 15px; - border-radius: 12px; + border-radius: 12px; - gap: 10px; + gap: 10px; - span { - font-size: 0.8rem; - opacity: 0.8; - } + span { + font-size: 0.8rem; + opacity: 0.8; + } - .tap-share-field_header { - display: flex; + .tap-share-field_header { + display: flex; - flex-direction: row; + flex-direction: row; - align-items: center; + align-items: center; - h1, - p { - margin: 0; - } + h1, + p { + margin: 0; + } - gap: 10px; - } - } + gap: 10px; + } + } } .tap-share-own_tags { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - align-items: center; - - gap: 10px; + align-items: center; - .tap-share-own_tags-add { - width: 100%; - } + gap: 10px; - .tap-share-own_tags-item { - display: flex; - flex-direction: row; + .tap-share-own_tags-add { + width: 100%; + } - align-items: center; + .tap-share-own_tags-item { + display: flex; + flex-direction: row; - width: 100%; + align-items: center; - gap: 10px; - padding: 10px; + width: 100%; - background-color: var(--background-color-primary); + gap: 10px; + padding: 10px; - border-radius: 8px; + background-color: var(--background-color-primary); - .tap-share-own_tags-item-icon { - font-size: 2rem; - } + border-radius: 8px; - .tap-share-own_tags-item-title { - display: flex; - flex-direction: column; + .tap-share-own_tags-item-icon { + font-size: 2rem; + } - width: 100%; + .tap-share-own_tags-item-title { + display: flex; + flex-direction: column; - gap: 10px; + width: 100%; - color: var(--text-color); + gap: 10px; - h1, - h2, - h3, - h4, - h5, - h6, - p, - span { - margin: 0; - } + color: var(--text-color); - span { - font-size: 0.7rem; - opacity: 0.7px; - } - } + h1, + h2, + h3, + h4, + h5, + h6, + p, + span { + margin: 0; + } - .tap-share-own_tags-item-actions { - display: flex; - flex-direction: row; + span { + font-size: 0.7rem; + opacity: 0.7px; + } + } - align-items: center; + .tap-share-own_tags-item-actions { + display: flex; + flex-direction: row; - gap: 10px; + align-items: center; - - } - - - } + gap: 10px; + } + } } .tap-share-register { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - height: 100%; + height: 100%; - gap: 20px; + gap: 20px; - &.compact { - .tap-share-register-header { - padding: 10px; - flex-direction: row; + &.compact { + .tap-share-register-header { + padding: 10px; + flex-direction: row; - justify-content: flex-start; + justify-content: flex-start; - .tap-share-register-header-icon { - font-size: 0; - width: 0; - height: 0; - } - } - } + .tap-share-register-header-icon { + font-size: 0; + width: 0; + height: 0; + } + } + } - .tap-share-register-header { - display: flex; - flex-direction: column; + .tap-share-register-header { + display: flex; + flex-direction: column; - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; - padding: 20px; + padding: 20px; - gap: 10px; + gap: 10px; - background-color: var(--background-color-accent); + background-color: var(--background-color-accent); - border-radius: 12px; + border-radius: 12px; - transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; - h1 { - margin: 0; - } + h1 { + margin: 0; + } - .tap-share-register-header-back { - font-size: 2rem; - color: var(--colorPrimary); + .tap-share-register-header-back { + font-size: 2rem; + color: var(--colorPrimary); - &.hidden { - width: 0; - height: 0; - padding: 0; - display: none; - } - } + &.hidden { + width: 0; + height: 0; + padding: 0; + display: none; + } + } - .tap-share-register-header-icon { - font-size: 5rem; - color: var(--colorPrimary); + .tap-share-register-header-icon { + font-size: 5rem; + color: var(--colorPrimary); - svg { - margin: 0; - } - } - } + svg { + margin: 0; + } + } + } - .tap-share-register-content { - display: flex; - flex-direction: column; + .tap-share-register-content { + display: flex; + flex-direction: column; - height: 100%; + height: 100%; - .tap-share-register_step { - display: flex; - flex-direction: column; + .tap-share-register_step { + display: flex; + flex-direction: column; - height: 100%; - width: 100%; + height: 100%; + width: 100%; - padding: 0 10px; + padding: 0 10px; - transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; - .adm-input-element { - color: var(--text-color); - } + .adm-input-element { + color: var(--text-color); + } - h1 { - transition: all 150ms ease-in-out; - color: var(--text-color); - } + h1 { + transition: all 150ms ease-in-out; + color: var(--text-color); + } - &.centered { - align-items: center; - } + &.centered { + align-items: center; + } - .ant-form { - width: 100%; + .ant-form { + width: 100%; - .ant-form-item { - height: fit-content; - padding: 0; + .ant-form-item { + height: fit-content; + padding: 0; - .ant-form_with_selector { - display: flex; - flex-direction: row; + .ant-form_with_selector { + display: flex; + flex-direction: row; - align-items: center; + align-items: center; - gap: 10px; + gap: 10px; - .ant-select { - width: fit-content; - } + .ant-select { + width: fit-content; + } - .ant-input { - width: 100%; - } - } + .ant-input { + width: 100%; + } + } - .ant-form-item-label { - height: fit-content; + .ant-form-item-label { + height: fit-content; - padding: 0; - margin: 0; + padding: 0; + margin: 0; - label { - height: fit-content; - padding: 0; - margin: 0; + label { + height: fit-content; + padding: 0; + margin: 0; - color: var(--text-color); - } - } + color: var(--text-color); + } + } - .description { - font-size: 0.8rem; - opacity: 0.8; + .description { + font-size: 0.8rem; + opacity: 0.8; - color: var(--text-color); - } - } - } + color: var(--text-color); + } + } + } - .tap-share-register_step_actions { - display: flex; - flex-direction: row; + .tap-share-register_step_actions { + display: flex; + flex-direction: row; - align-items: center; + align-items: center; - gap: 20px; + gap: 20px; - padding: 10px; + padding: 10px; - color: var(--text-color); - } - } - } + color: var(--text-color); + } + } + } } .animation-player { - width: 50%; + width: 50%; - &.loading { - .phone-loop { - color: #17b2ff; - } - } + &.loading { + .phone-loop { + color: #17b2ff; + } + } - .phone-loop { - color: var(--colorPrimary); + .phone-loop { + color: var(--colorPrimary); - path { - fill: currentColor; - stroke: currentColor; - } - } -} \ No newline at end of file + path { + fill: currentColor; + stroke: currentColor; + } + } +}