update html add the github

LICENSE

@@ -0,0 +1,9 @@
+Copyright 2018 cjl_spy@163.com
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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 = """{
+// const defaultValue = """{
-  "body": "",
+//   "body": "",
-  "data": [1],
+//   "data": [1],
-  "input_content":["1"],
+//   "input_content":["1"],
-  "list1":[{"name":"hello"}],
+//   "list1":[{"name":"hello"}],
-  "number": [1.02],
+//   "number": [1.02],
-  "user":{"name":"abc"}
+//   "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,58 @@
 
 <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>
+        <a href="https://github.com/caijinglong/json2dart">
+            <img src="github_logo.jpg" width="50px" />
+        </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="title">
-            <div class="top">
+            <span class="half_span">copy your json to left textarea</span>
-                将json粘贴至左边
+            <span class="half_span">
-            </div>
+                <div class="result_title">
-            <textarea id="json" title="json字符串"></textarea>
+                    dart class name
-            <div>
+                    <input id="out_entity_name" />
-                <button id="format">格式化</button>
+                    <input type="checkbox" id="use_json_key" />
-            </div>
+                    <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="content">
-            <div class="top"></div>
+            <span class="half_span">
-            <div class="result_title">
+                <textarea id="json" title="json" class="content_area"></textarea>
-                类名称
+            </span>
-                <input id="out_entity_name" />
+            <span class="half_span">
-                <input type="checkbox" id="use_json_key" />
+                <textarea id="result" title="result" class="content_area"></textarea>
-                <span id="check_label">jsonKey annotation</span>
+            </span>
-                <input type="checkbox" id="camelCase" />
+        </div>
-                <span id="camelCaseLabel">use camelCase</span>
+        <div class="func">
-            </div>
+            <span class="half_span">
-            <div id="file_name"></div>
+                <button id="format">format</button>
-            <textarea id="result" title="结果"></textarea>
+            </span>
-            <div>
+            <span class="half_span">
-                <button id="copy">复制</button>
+                <button id="copy">copy</button>
-                <button id="save">下载</button>
+                <button id="save">download</button>
-            </div>
+            </span>
         </div>
-
     </div>
 </body>
 

web/index_ch.html

@@ -0,0 +1,61 @@
+<!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>
+        <a href="https://github.com/caijinglong/json2dart">
+            <img src="github_logo.jpg" width="50px" />
+        </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%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    font-family: "Roboto", sans-serif;
+  font-family: "Roboto", sans-serif;
 }
-
+/* 
 .top {
-    height: 4vh;
+  height: 4vh;
-    text-align: center;
+  text-align: center;
-    padding-top: 1vh;
+  padding-top: 1vh;
-}
-
-.textarea {
-    width: 50%;
-    height: 90%;
-    text-align: center;
-    float: left;
-}
-
-textarea {
-    width: 90%;
-    height: 80vh;
 }
 
 .result_title {
-    padding-bottom: 15px;
+  padding-bottom: 15px;
 }
 
-#result {
+.textarea {
-    width: 90%;
+  width: 50%;
-    height: 70vh;
+  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;
+}