wristband first

src/components/AdminPage/Wristband/Location/ListItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Table, Button } from 'semantic-ui-react';
+
+const ListItem = ({ i18n, data, delLocation, editLocation }) => {
+
+    return (
+        <Table.Row>
+            <Table.Cell>
+                <Button content="Edit" basic onClick={()=>{editLocation(1, data)}} />
+                <Button content="Delete" basic onClick={()=>{delLocation(data.uid)}} />
+            </Table.Cell>
+            <Table.Cell>{data.serialnumber}</Table.Cell>
+            <Table.Cell>{data.name}</Table.Cell>
+        </Table.Row>
+    )
+}
+
+export default ListItem;

src/components/AdminPage/Wristband/Location/LocationModal.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Modal, Form, Input, Button, Checkbox, Grid } from 'semantic-ui-react';
+
+const WristbandModal = ({ i18n, open, type, data, closeModal, submitModal }) => {
+
+    return (
+        <Modal open={open}>
+            <Modal.Header content={type == 1 ? '修改資料' : '新增資料'} />
+            <Modal.Content>
+                <Form onSubmit={(e,d)=>{
+                        e.preventDefault();
+                        submitModal(type, d.formData);
+                    }} serializer={e => {
+                        let json = {
+                            name: '',
+                            sn: '',
+                            id: type == 1 ? data.uid : ''
+                        };
+
+                        let name = e.querySelector('input[name="name"]');
+                        if(name && 'value' in name) json.name = name.value;
+                        let sn = e.querySelector('input[name="serialnumber"]');
+                        if(sn && 'value' in sn) json.sn = sn.value;
+
+                        return json;
+                    }}>
+                    <Form.Field>
+                        <Input label="裝置序號" name="serialnumber" defaultValue={data.serialnumber} disabled={type == 1} />
+                    </Form.Field>
+                    <Form.Field>
+                        <Input label="名稱" name="name" defaultValue={data.name} />
+                    </Form.Field>
+                    <Grid columns={2}>
+                        <Grid.Column>
+                            <Button content="送出" fluid type="submit" />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <Button content="取消" fluid type="button" onClick={()=>{ closeModal() }} />
+                        </Grid.Column>
+                    </Grid>
+                </Form>
+            </Modal.Content>
+        </Modal>
+    )
+}
+export default WristbandModal;