nep-cli 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/image.html +29 -8
- package/bin/image4.html +57 -0
- package/bin/index.js +681 -266
- package/bin/json.html +172 -0
- package/package.json +1 -1
package/bin/json.html
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>NEP+ JSON Data</title>
|
|
8
|
+
<!-- Include Vue 2 and Vuetify 2 from CDN -->
|
|
9
|
+
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.3/dist/vuetify.min.css" rel="stylesheet">
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.3/dist/vuetify.js"></script>
|
|
12
|
+
<!-- Include JSON Editor library -->
|
|
13
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.10.2/jsoneditor.min.js"></script>
|
|
14
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.10.2/jsoneditor.min.css" rel="stylesheet">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
div.jsoneditor,
|
|
19
|
+
div.jsoneditor-menu {
|
|
20
|
+
border-color: #4b4b4b;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
div.jsoneditor-menu {
|
|
24
|
+
background-color: #4b4b4b;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
div.jsoneditor-tree,
|
|
28
|
+
div.jsoneditor textarea.jsoneditor-text {
|
|
29
|
+
background-color: #191919;
|
|
30
|
+
color: #ffffff;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
div.jsoneditor-field,
|
|
34
|
+
div.jsoneditor-value {
|
|
35
|
+
color: #ffffff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
table.jsoneditor-search div.jsoneditor-frame {
|
|
39
|
+
background: #191919;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
tr.jsoneditor-highlight,
|
|
43
|
+
tr.jsoneditor-selected {
|
|
44
|
+
background-color: #191919;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
div.jsoneditor-field[contenteditable=true]:focus,
|
|
48
|
+
div.jsoneditor-field[contenteditable=true]:hover,
|
|
49
|
+
div.jsoneditor-value[contenteditable=true]:focus,
|
|
50
|
+
div.jsoneditor-value[contenteditable=true]:hover,
|
|
51
|
+
div.jsoneditor-field.jsoneditor-highlight,
|
|
52
|
+
div.jsoneditor-value.jsoneditor-highlight {
|
|
53
|
+
background-color: #191919;
|
|
54
|
+
border-color: #191919;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
div.jsoneditor-field.highlight-active,
|
|
58
|
+
div.jsoneditor-field.highlight-active:focus,
|
|
59
|
+
div.jsoneditor-field.highlight-active:hover,
|
|
60
|
+
div.jsoneditor-value.highlight-active,
|
|
61
|
+
div.jsoneditor-value.highlight-active:focus,
|
|
62
|
+
div.jsoneditor-value.highlight-active:hover {
|
|
63
|
+
background-color: #191919;
|
|
64
|
+
border-color: #191919;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
div.jsoneditor-tree button:focus {
|
|
68
|
+
background-color: #191919;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* coloring of JSON in tree mode */
|
|
72
|
+
div.jsoneditor-readonly {
|
|
73
|
+
color: #191919;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
div.jsoneditor td.jsoneditor-separator {
|
|
77
|
+
color: #191919;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
div.jsoneditor-value.jsoneditor-string {
|
|
81
|
+
color: #00ff88;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
div.jsoneditor-value.jsoneditor-object,
|
|
85
|
+
div.jsoneditor-value.jsoneditor-array {
|
|
86
|
+
color: #bababa;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
div.jsoneditor-value.jsoneditor-number {
|
|
90
|
+
color: #ff4040;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
div.jsoneditor-value.jsoneditor-boolean {
|
|
94
|
+
color: #ff8048;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
div.jsoneditor-value.jsoneditor-null {
|
|
98
|
+
color: #49a7fc;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
div.jsoneditor-value.jsoneditor-invalid {
|
|
102
|
+
color: white;
|
|
103
|
+
}
|
|
104
|
+
</style>
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
<body>
|
|
108
|
+
<div id="app">
|
|
109
|
+
<v-app style="background-color: #0D0D0D;">
|
|
110
|
+
<v-container>
|
|
111
|
+
<v-toolbar flat dense dark color="transparent">
|
|
112
|
+
<v-toolbar-title> Topic: {{ topic }}</v-toolbar-title>
|
|
113
|
+
<v-spacer></v-spacer>
|
|
114
|
+
</v-toolbar>
|
|
115
|
+
<v-row>
|
|
116
|
+
<v-col>
|
|
117
|
+
<v-card flat>
|
|
118
|
+
<!-- Container for the JSON editor -->
|
|
119
|
+
<div id="json-editor-container" style="width: 100%; height: 800px; "></div>
|
|
120
|
+
</v-card>
|
|
121
|
+
</v-col>
|
|
122
|
+
</v-row>
|
|
123
|
+
</v-container>
|
|
124
|
+
</v-app>
|
|
125
|
+
</div>
|
|
126
|
+
<script src="/socket.io/socket.io.js"></script> <!-- Include the Socket.IO client library -->
|
|
127
|
+
<script>
|
|
128
|
+
// Function to get the value of a URL parameter by name
|
|
129
|
+
function getParameterByName(name, url) {
|
|
130
|
+
if (!url) url = window.location.href;
|
|
131
|
+
name = name.replace(/[\[\]]/g, "\\$&");
|
|
132
|
+
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
133
|
+
results = regex.exec(url);
|
|
134
|
+
if (!results) return null;
|
|
135
|
+
if (!results[2]) return '';
|
|
136
|
+
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
const port = getParameterByName('port');
|
|
140
|
+
const topic = getParameterByName('topic');
|
|
141
|
+
|
|
142
|
+
// Initialize Vue and Vuetify
|
|
143
|
+
new Vue({
|
|
144
|
+
el: '#app',
|
|
145
|
+
vuetify: new Vuetify(),
|
|
146
|
+
data() {
|
|
147
|
+
return {
|
|
148
|
+
topic: '',
|
|
149
|
+
};
|
|
150
|
+
},
|
|
151
|
+
mounted() {
|
|
152
|
+
this.topic = getParameterByName('topic');
|
|
153
|
+
const socket = io.connect(`http://localhost:${port}`);
|
|
154
|
+
const container = document.getElementById('json-editor-container');
|
|
155
|
+
const jsonEditor = new JSONEditor(container, {
|
|
156
|
+
mode: 'text', // Use the tree mode for a collapsible tree view
|
|
157
|
+
mainMenuBar: false,
|
|
158
|
+
onChange: function () {
|
|
159
|
+
// Handle changes to the JSON data if needed
|
|
160
|
+
},
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
socket.on('json_data', (data) => {
|
|
164
|
+
// Set the received JSON data in the editor
|
|
165
|
+
jsonEditor.set(data);
|
|
166
|
+
});
|
|
167
|
+
},
|
|
168
|
+
});
|
|
169
|
+
</script>
|
|
170
|
+
</body>
|
|
171
|
+
|
|
172
|
+
</html>
|