Uses <DateInput> widget

Add gap to some widgets
Bettew auto layout

index.html

@@ -10,7 +10,8 @@
 
   <!-- Bootstrap -->
   <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">
+  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
+  <link href="./node_modules/react-datetime/css/react-datetime.css" rel="stylesheet">
 
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -23,6 +24,10 @@
       font-family: "7bar";
       src: url("./digital-7.ttf");
     }
+
+    body {
+      background-color: #d4d0c8;
+    }
   </style>
 </head>
 

main.ts

@@ -1,4 +1,4 @@
 import { start } from "mammoth";
 import * as path from "path";
 
-start(path.join(__dirname, "index.html"));
+start(path.join(__dirname, "index.html"));

package.json

@@ -12,7 +12,10 @@
   "dependencies": {
     "@types/react-router-redux": "^5.0.10",
     "electron": "^1.7.10",
-    "mammoth": "git+file:///home/forks/work/mammoth-lib.git"
+    "mammoth": "git+file:///home/forks/work/mammoth-lib.git",
+    "moment": "^2.20.1",
+    "react-datetime": "^2.11.1",
+    "tslint": "^5.8.0"
   },
   "devDependencies": {
     "typescript": "^2.6.2"

src/index.tsx

@@ -20,7 +20,7 @@ ReactDOM.render(
     </ConnectedRouter>
   </Provider>,
   document.getElementById("root"),
-)
+);
 
 function Root() {
   return <div><a onClick={() => pushState("/login")}>Goto login</a></div>;

src/main-view/container.tsx

@@ -2,29 +2,44 @@ import * as React from "react";
 import { connect, Dispatch } from "react-redux";
 import { StMainView, StAppWithMainView } from ".";
 import { Grid, Row, Col, Table, ButtonToolbar, Button, Panel, FormControl, Checkbox } from "react-bootstrap";
+import "mammoth/ui/jss";
+import { Led } from "mammoth/ui/led";
+import { DateInput } from "mammoth/ui/date-input";
+import jss from "jss";
+import preset from "jss-preset-default";
+
+jss.setup(preset());
+
+const sheet = jss.createStyleSheet({
+  pnl: {
+    height: "calc(100% - 20px)",
+  },
+  topRow: {
+    maxHeight: "20vh",
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  gap: {
+    marginBottom: 5,
+  }
+}).attach();
 
 interface Props { };
 
 interface Callbacks { };
 
 function mainView(props: Props & Callbacks) {
-  const weightPanel = {
-    color: "#ff4300",
-    backgroundColor: "black",
-    fontSize: "7rem",
-    fontFamily: "\"7bar\"",
-  };
   return <Grid>
-    <Row style={{ height: "calc(20vh - 50px)" }}>
-      <Col xs={3}>
-        <div style={weightPanel}>0.00</div>
-        <ButtonToolbar>
+    <Row className={sheet.classes.topRow}>
+      <Col lg={3}>
+        <Led className={sheet.classes.gap} text="0.00" />
+        <ButtonToolbar className={sheet.classes.gap}>
           <Button>启用称重</Button>
           <Button disabled>停止称重</Button>
         </ButtonToolbar>
-        <div>宰杀日期：<input /></div>
+        <div>宰杀日期：<DateInput /></div>
       </Col>
-      <Col xs={5} style={{ height: "15vh", flexWrap: "wrap", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
+      <Col lg={5} style={{ height: "15vh", flexWrap: "wrap", display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
         <Checkbox>打印条码</Checkbox>
         <Button>打印选中</Button>
         <Button>同步数据</Button>
@@ -33,7 +48,7 @@ function mainView(props: Props & Callbacks) {
         <div style={{ flex: 1 }}></div>
         <div style={{ alignSelf: "flex-end" }}>屠宰顺序: 0 已宰头数: 0</div>
       </Col>
-      <Col xs={4}>
+      <Col lg={4}>
         <ButtonToolbar>
           <Button bsSize="large">掉猪</Button>
           <Button bsSize="large">删除选中</Button>
@@ -42,10 +57,10 @@ function mainView(props: Props & Callbacks) {
       </Col>
     </Row>
     <Row>
-      <Col xs={8}>
-        <Row>
-          <Panel style={{ height: "40vh" }} header="烫褪">
-            <Col xs={6} >
+      <Col lg={8}>
+        <Row style={{ height: "40vh" }}>
+          <Panel className={sheet.classes.pnl} header="烫褪">
+            <Col lg={6} >
               <Table >
                 <thead>
                   <tr>
@@ -57,7 +72,7 @@ function mainView(props: Props & Callbacks) {
                 </thead>
               </Table>
             </Col>
-            <Col xs={6}>
+            <Col lg={6}>
               <ButtonToolbar>
                 <Button bsStyle="info">一级</Button>
                 <Button bsStyle="info">二级</Button>
@@ -66,9 +81,9 @@ function mainView(props: Props & Callbacks) {
             </Col>
           </Panel>
         </Row>
-        <Row>
-          <Panel style={{ height: "40vh" }} header="毛剥">
-            <Col xs={6}>
+        <Row style={{ height: "40vh" }} >
+          <Panel className={sheet.classes.pnl} header="毛剥">
+            <Col lg={6}>
               <Table>
                 <thead>
                   <tr>
@@ -80,7 +95,7 @@ function mainView(props: Props & Callbacks) {
                 </thead>
               </Table>
             </Col>
-            <Col xs={6}>
+            <Col lg={6}>
               <ButtonToolbar>
                 <Button>一级</Button>
                 <Button>二级</Button>
@@ -90,8 +105,8 @@ function mainView(props: Props & Callbacks) {
           </Panel>
         </Row>
       </Col>
-      <Col xs={4}>
-        <Panel style={{ height: "calc(80vh + 20px)" }} header="记录">
+      <Col lg={4} style={{ height: "80vh" }} >
+        <Panel className={sheet.classes.pnl} header="记录">
           <Table>
             <thead>
               <tr>

tsconfig.json

@@ -14,7 +14,7 @@
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "importHelpers": true, /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
     /* Strict Type-Checking Options */

tslint.json

@@ -0,0 +1,14 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "max-line-length": {
+      "options": [
+        120
+      ]
+    },
+    "arrow-parens": false,
+    "ordered-imports": false,
+    "interface-name": false,
+    "object-literal-sort-keys": false
+  }
+}