add the english version

README.md

@@ -1,22 +1,27 @@
 # json2dart_serialization
 
-一个网页版本的json转dart库 
+[English readme](https://github.com/CaiJingLong/json2dart/blob/master/README_ENG.md)
+
+一个网页版本的 json 转 dart 库
+
+[直接使用 json2dart](https://caijinglong.github.io/json2dart/index.html)
 
 ## 说明
 
-不同于https://github.com/debuggerx01/JSONFormat4Flutter 的是:这个是为了json_serializable创建的
-页面较简陋，功能完善😊
+感谢[JSONFormat4Flutter](https://github.com/debuggerx01/JSONFormat4Flutter) 给予的灵感
+不同于这个库的是:这个是为了 json_serializable 创建的
 
-json_serializable 可以参考flutter官网json部分 [flutter](https://flutter.io/json)
+json_serializable 可以参考 flutter 官网 json 部分 [flutter](https://flutter.io/json)
 
-项目的展示地址： https://caijinglong.github.io/json2dart/
+项目使用 dart web 开发
 
-项目使用dart web开发
-## 说明
-主体功能完结，有需要修改的地方欢迎留言
+主体功能已完结，有需要修改的地方欢迎留言
 
+## 开发环境
 
-```
+其他环境不保证可以编译这份代码
+
+```cli
 dart --version
 Dart VM version: 2.0.0-dev.69.5 (Tue Jul 31 15:05:14 2018 +0200) on "macos_x64"
 ```
@@ -26,4 +31,4 @@ Dart VM version: 2.0.0-dev.69.5 (Tue Jul 31 15:05:14 2018 +0200) on "macos_x64"
 Created from templates made available by Stagehand under a BSD-style
 [license](https://github.com/dart-lang/stagehand/blob/master/LICENSE).
 
-the library also under BSD-style.
+the library also under BSD-style.

README_ENG.md

@@ -0,0 +1,27 @@
+# json2dart_serialization
+
+a dart web for json2dart
+
+use for web location: [json2dart](https://caijinglong.github.io/json2dart/index.html)
+
+## intro
+
+Thank you for the inspiration of this [JSONFormat4Flutter](https://github.com/debuggerx01/JSONFormat4Flutter)
+
+This project was created for the [json_serializable](https://pub.dartlang.org/packages/json_serializable)
+
+json_serializable also read the flutter's json page [flutter](https://flutter.io/json)
+
+## the code compile env
+
+```cli
+dart --version
+Dart VM version: 2.0.0-dev.69.5 (Tue Jul 31 15:05:14 2018 +0200) on "macos_x64"
+```
+
+## license
+
+Created from templates made available by Stagehand under a BSD-style
+[license](https://github.com/dart-lang/stagehand/blob/master/LICENSE).
+
+the library also under BSD-style.

lib/json_generator.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:convert';
 import 'dart:html';
 
@@ -11,20 +12,24 @@ bool isCamelCase = true;
 
 var downloadFileName = "";
 
-const defaultValue = """{
-  "body": "",
-  "data": [1],
-  "input_content":["1"],
-  "list1":[{"name":"hello"}],
-  "number": [1.02],
-  "user":{"name":"abc"}
-}""";
+// const defaultValue = """{
+//   "body": "",
+//   "data": [1],
+//   "input_content":["1"],
+//   "list1":[{"name":"hello"}],
+//   "number": [1.02],
+//   "user":{"name":"abc"}
+// }""";
+const defaultValue = "";
+
+void main() async {
+  isChinese = await _isChinese();
 
-void main() {
   TextAreaElement jsonInput = querySelector("#json");
   jsonInput.value = defaultValue;
 
   jsonInput.onInput.listen((event) {
+    // print(jsonInput.value);
     refreshData();
   });
 
@@ -104,7 +109,28 @@ void main() {
   });
 }
 
-void refreshData() {
+Future<bool> _isChinese() async {
+  // var lang = await findSystemLocale();
+  List<MetaElement> elements = querySelectorAll("meta");
+
+  String lang;
+  for (var e in elements) {
+    var _lang = e.getAttribute("lang");
+    if (_lang != null) {
+      lang = _lang;
+      break;
+    }
+  }
+  if (lang?.contains("zh") == true) {
+    return true;
+  }
+
+  return false;
+}
+
+bool isChinese = false;
+
+void refreshData() async {
   TextAreaElement jsonInput = querySelector("#json");
   var string = jsonInput.value;
   String pretty;
@@ -112,7 +138,11 @@ void refreshData() {
   try {
     pretty = formatJson(string);
   } on Exception {
-    result.value = "不是一个正确的json";
+    if (isChinese) {
+      result.value = "不是一个正确的json";
+    } else {
+      result.value = "Not JSON";
+    }
     return;
   }
   String entityClassName;
@@ -126,7 +156,15 @@ void refreshData() {
   var dartCode = generator.makeDartCode();
   var dartFileName = ("${generator.fileName}.dart");
   downloadFileName = dartFileName;
-  querySelector("#file_name").text = "应该使用的文件名为: $dartFileName";
+
+  String filePrefix;
+  if (isChinese) {
+    filePrefix = "应该使用的文件名为:";
+  } else {
+    filePrefix = "your dart file name is:";
+  }
+  print(filePrefix);
+  querySelector("#file_name").text = "$filePrefix $dartFileName";
 
   result.value = dartCode;
 }

pubspec.yaml

@@ -12,7 +12,9 @@ environment:
 dependencies:
   # Your other regular dependencies here
   json_annotation: ^0.2.3
+  intl: ^0.15.7
 
+  
 dev_dependencies:
   build_runner: ^0.9.0
   build_web_compilers: ^0.4.0

web/index.html

@@ -4,45 +4,55 @@
 
 <head>
     <meta charset="utf-8" />
+    <meta lang="en" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="scaffolded-by" content="https://github.com/google/stagehand" />
-    <title>hello_world</title>
+    <title>json2dart_for_json_serializable</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="icon" href="favicon.ico">
     <script defer src="main.dart.js"></script>
 </head>
 
 <body>
-
+    <div class="lang">
+        <a href="index_ch.html">中文</a>
+    </div>
+    <h1>simple use
+        <a href="https://pub.dartlang.org/packages/json_serializable" target="_blank">json_serializable</a>
+    </h1>
     <div>
-        <div id="input" class="textarea">
-            <div class="top">
-                将json粘贴至左边
-            </div>
-            <textarea id="json" title="json字符串"></textarea>
-            <div>
-                <button id="format">格式化</button>
-            </div>
+        <div class="title">
+            <span class="half_span">copy your json to left textarea</span>
+            <span class="half_span">
+                <div class="result_title">
+                    dart class name
+                    <input id="out_entity_name" />
+                    <input type="checkbox" id="use_json_key" />
+                    <span id="check_label">jsonKey annotation</span>
+                    <input type="checkbox" id="camelCase" />
+                    <span id="camelCaseLabel">use camelCase</span>
+                </div>
+                <div id="file_name"></div>
+            </span>
         </div>
-        <div id="output" class="textarea">
-            <div class="top"></div>
-            <div class="result_title">
-                类名称
-                <input id="out_entity_name" />
-                <input type="checkbox" id="use_json_key" />
-                <span id="check_label">jsonKey annotation</span>
-                <input type="checkbox" id="camelCase" />
-                <span id="camelCaseLabel">use camelCase</span>
-            </div>
-            <div id="file_name"></div>
-            <textarea id="result" title="结果"></textarea>
-            <div>
-                <button id="copy">复制</button>
-                <button id="save">下载</button>
-            </div>
+        <div class="content">
+            <span class="half_span">
+                <textarea id="json" title="json" class="content_area"></textarea>
+            </span>
+            <span class="half_span">
+                <textarea id="result" title="result" class="content_area"></textarea>
+            </span>
+        </div>
+        <div class="func">
+            <span class="half_span">
+                <button id="format">format</button>
+            </span>
+            <span class="half_span">
+                <button id="copy">copy</button>
+                <button id="save">download</button>
+            </span>
         </div>
-
     </div>
 </body>
 

web/index_ch.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta lang="zh-CN" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="scaffolded-by" content="https://github.com/google/stagehand" />
+    <title>json2dart_for_json_serializable</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" href="favicon.ico">
+    <script defer src="main.dart.js"></script>
+</head>
+
+<body>
+    <div class="lang">
+        <a href="index.html">English</a>
+    </div>
+    <h1>为了便利使用
+        <a href="https://pub.dartlang.org/packages/json_serializable">json_serializable</a>库</h1>
+    <div>
+        <div class="title">
+            <span class="half_span">将json粘贴至左边</span>
+            <span class="half_span">
+                <div class="result_title">
+                    类名称
+                    <input id="out_entity_name" />
+                    <input type="checkbox" id="use_json_key" />
+                    <span id="check_label">jsonKey annotation</span>
+                    <input type="checkbox" id="camelCase" />
+                    <span id="camelCaseLabel">use camelCase</span>
+                </div>
+                <div id="file_name"></div>
+            </span>
+        </div>
+        <div class="content">
+            <span class="half_span">
+                <textarea id="json" title="json字符串" class="content_area"></textarea>
+            </span>
+            <span class="half_span">
+                <textarea id="result" title="结果" class="content_area"></textarea>
+            </span>
+        </div>
+        <div class="func">
+            <span class="half_span">
+                <button id="format">格式化</button>
+            </span>
+            <span class="half_span">
+                <button id="copy">复制</button>
+                <button id="save">下载</button>
+            </span>
+        </div>
+    </div>
+</body>
+
+</html>

web/styles.css

@@ -2,40 +2,87 @@
 
 html,
 body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: "Roboto", sans-serif;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: "Roboto", sans-serif;
 }
-
+/* 
 .top {
-    height: 4vh;
-    text-align: center;
-    padding-top: 1vh;
-}
-
-.textarea {
-    width: 50%;
-    height: 90%;
-    text-align: center;
-    float: left;
-}
-
-textarea {
-    width: 90%;
-    height: 80vh;
+  height: 4vh;
+  text-align: center;
+  padding-top: 1vh;
 }
 
 .result_title {
-    padding-bottom: 15px;
+  padding-bottom: 15px;
 }
 
-#result {
-    width: 90%;
-    height: 70vh;
+.textarea {
+  width: 50%;
+  height: 90%;
+  text-align: center;
+  float: left;
+}
+
+.content_area {
+  width: 80%;
+  height: 90vh;
+  text-align: center;
+  float: left;
 }
 
 .out_entity_name {
-    height: 40px;
-}
+  height: 40px;
+} */
+
+h1 {
+  text-align: center;
+}
+
+.half_span {
+  width: 50%;
+  float: left;
+  text-align: center;
+}
+
+textarea {
+  width: 86%;
+  height: 70vh;
+}
+
+.content {
+  padding-top: 5vh;
+}
+
+.func .half_span {
+  height: 7rem;
+  padding-top: 1rem;
+}
+
+button {
+  width: 6rem;
+  height: 2rem;
+  font-size: 1rem;
+}
+
+#file_name {
+  font-size: 0.5rem;
+  padding-top: 5px;
+  color: mediumvioletred;
+}
+
+.lang {
+  padding-right: 1vw;
+  padding-top: 1vh;
+  text-align: right;
+}
+
+a {
+  color: blue;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration-line: underline;
+}