1
+
2
+
3
+
4
+ <!DOCTYPE html>
5
+ < html class ="default " lang ="en ">
6
+
7
+ < head >
8
+ < meta charSet ="utf-8 " />
9
+ < meta http-equiv ="x-ua-compatible " content ="IE=edge " />
10
+ < title > TurbineChange.js Example</ title >
11
+ < meta name ="description " content ="Documentation for cwmsjs " />
12
+ < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
13
+ < link rel ="stylesheet " href ="../assets/style.css " />
14
+ < link rel ="stylesheet " href ="../assets/highlight.css " />
15
+ < script defer src ="../assets/main.js "> </ script >
16
+ < script async src ="../assets/icons.js " id ="tsd-icons-script "> </ script >
17
+ < script async src ="../assets/search.js " id ="tsd-search-script "> </ script >
18
+ < script async src ="../assets/navigation.js " id ="tsd-nav-script "> </ script >
19
+ < link rel ="stylesheet " href ="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism.css " id ="light-theme " disabled >
20
+ < link rel ="stylesheet " href ="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-okaidia.css " id ="dark-theme ">
21
+ </ head >
22
+
23
+ < body >
24
+ < script > document . documentElement . dataset . theme = localStorage . getItem ( "tsd-theme" ) || "os" ; document . body . style . display = "none" ; setTimeout ( ( ) => app ? app . showPage ( ) : document . body . style . removeProperty ( "display" ) , 500 ) </ script >
25
+ < script >
26
+ const lightTheme = document . getElementById ( 'light-theme' ) ;
27
+ const darkTheme = document . getElementById ( 'dark-theme' ) ;
28
+ if ( document . documentElement . dataset . theme == "light" ) {
29
+ lightTheme . disabled = false ;
30
+ darkTheme . disabled = true ;
31
+ } else {
32
+ lightTheme . disabled = true ;
33
+ darkTheme . disabled = false ;
34
+ }
35
+ </ script >
36
+ < header class ="tsd-page-toolbar ">
37
+ < div class ="tsd-toolbar-contents container ">
38
+ < div class ="table-cell " id ="tsd-search " data-base =".. ">
39
+ < div class ="field "> < label for ="tsd-search-field "
40
+ class ="tsd-widget tsd-toolbar-icon search no-caption "> < svg width ="16 " height ="16 "
41
+ viewBox ="0 0 16 16 " fill ="none ">
42
+ < use href ="../assets/icons.svg#icon-search "> </ use >
43
+ </ svg > </ label > < input type ="text " id ="tsd-search-field " aria-label ="Search " /> </ div >
44
+ < div class ="field ">
45
+ < div id ="tsd-toolbar-links "> </ div >
46
+ </ div >
47
+ < ul class ="results ">
48
+ < li class ="state loading "> Preparing search index...</ li >
49
+ < li class ="state failure "> The search index is not available</ li >
50
+ </ ul > < a href ="/cwms-data-api-client-javascript/ " class ="title "> HOME - cwmsjs - v1.15.0</ a >
51
+ </ div >
52
+ </ div >
53
+ </ header >
54
+ < div style ="margin: auto; width: 80%; padding: 10px; ">
55
+ < div class ="tsd-page-title ">
56
+ < ul class ="tsd-breadcrumb ">
57
+ < li > < a href ="../modules.html "> cwmsjs</ a > </ li >
58
+ < li > < a href ="/cwms-data-api-client-javascript/examples "> Examples</ a > </ li >
59
+ < li > < a href ="/cwms-data-api-client-javascript/examples/TurbineChange.js.html "> TurbineChange.js</ a > </ li >
60
+ </ ul >
61
+ < h1 > Example: TurbineChange.js</ h1 >
62
+ </ div >
63
+ < section class ="tsd-panel tsd-comment ">
64
+ < div class ="tsd-comment tsd-typography ">
65
+ < p > An example for calling the TurbineChange.js endpoint via CDA in JavaScript</ p >
66
+ < p > < a href ="https://cwms-data.usace.army.mil/cwms-data "> Swagger UI</ a > for Endpoints</ p >
67
+ </ div >
68
+ < div class ="tsd-comment tsd-typography "> </ div >
69
+ </ section >
70
+ < hr />
71
+ < section >
72
+ < h2 > Groundwork-Water + React</ h2 >
73
+ < div > Checkout < a href ="https://usace-watermanagement.github.io/groundwork-water/#/docs/hooks "> Groundwork-Water Hooks</ a > < br >
74
+ < em > The data components library for USACE made in React + Groundwork</ em >
75
+ < p >
76
+ Hooks are made wrapping CWMSjs using code similar to the React example below. < br >
77
+ They also provide variables for you to track the state, progress, and data of the request.
78
+ < br >
79
+ The header on the Groundwork-Water webpage provides a list of currently available hooks.
80
+ </ p >
81
+ </ div >
82
+ </ section >
83
+ < hr />
84
+ < section class ="tsd-panel tsd-hierarchy ">
85
+
86
+ < h2 > React + Vite Example</ h2 >
87
+ < b > To Install:</ b >
88
+ < code class ="language-shell "> npm install cwmsjs --save</ code > < br >
89
+ < pre >
90
+ < code class ="language-javascript "> import { TurbinesApi } from "cwmsjs";
91
+ import { Configuration } from "typedoc";
92
+
93
+ const tb_api = new TurbinesApi(config);
94
+ tb_api
95
+ .getSwtDataProjectsTurbines({
96
+ projectId: 'KEYS',
97
+ office: 'SWT',
98
+ })
99
+ .then((r) => r.raw.json())
100
+ .then((data) => {
101
+ console.log(data?.parameters);
102
+ console.log(data?.parameters?.parameters);
103
+ Object.entries(data?.parameters?.parameters).forEach(([key, value]) => {
104
+ console.log(value?.['abstract-param']);
105
+ console.log(value?.['office']);
106
+ console.log(value?.['default-english-unit']);
107
+ console.log(value?.['default-si-unit']);
108
+ console.log(value?.['long-name']);
109
+ console.log(value?.['description']);
110
+ });
111
+ })
112
+ .catch(async (e) => {
113
+ if (e.response) {
114
+ const error_msg = e.response.json();
115
+ e.message = `${e.response.url}\n${e.message}\n${JSON.stringify(error_msg, null, 2)}`;
116
+ console.error(e);
117
+ throw e;
118
+ } else {
119
+ throw e;
120
+ }
121
+ });
122
+ </ code >
123
+ </ pre >
124
+ < br />
125
+ < hr />
126
+ < h2 > Bundle / Vanilla JS Example</ h2 >
127
+ < b > To Install:</ b > < br >
128
+ < p >
129
+ < ol >
130
+ < li > Run < br >
131
+ < code class ="language-shell "> curl -O "https://github.com/HydrologicEngineeringCenter/cwms-data-api-client-javascript/main/src/dist/bundle.js"</ code > < br >
132
+ to download bundle.js to your system</ li >
133
+ < li > Copy bundle.js to your web directory if not in that directory already</ li >
134
+ </ o >
135
+ </ p >
136
+ < pre >
137
+ < code class ="language-html "> <!-- Include the bundle.js file -->
138
+ <script src="./bundle.js"></script>
139
+ <!-- Call the cwmsjs after the bundle has loaded -->
140
+ <script type="module">
141
+ const tb_api = new cwmsjs.TurbinesApi(config);
142
+ tb_api
143
+ .getSwtDataProjectsTurbines({
144
+ projectId: 'KEYS',
145
+ office: 'SWT',
146
+ })
147
+ .then((r) => r.raw.json())
148
+ .then((data) => {
149
+ console.log(data?.parameters);
150
+ console.log(data?.parameters?.parameters);
151
+ Object.entries(data?.parameters?.parameters).forEach(([key, value]) => {
152
+ console.log(value?.['abstract-param']);
153
+ console.log(value?.['office']);
154
+ console.log(value?.['default-english-unit']);
155
+ console.log(value?.['default-si-unit']);
156
+ console.log(value?.['long-name']);
157
+ console.log(value?.['description']);
158
+ });
159
+ })
160
+ .catch(async (e) => {
161
+ if (e.response) {
162
+ const error_msg = e.response.json();
163
+ e.message = `${e.response.url}\n${e.message}\n${JSON.stringify(error_msg, null, 2)}`;
164
+ console.error(e);
165
+ throw e;
166
+ } else {
167
+ throw e;
168
+ }
169
+ });
170
+
171
+ </script></ code >
172
+ </ pre >
173
+ </ section >
174
+ </ div >
175
+ < footer >
176
+ < p class ="tsd-generator "> Generated using < a href ="https://typedoc.org/ " target ="_blank "> TypeDoc</ a > </ p >
177
+ </ footer >
178
+ < div class ="overlay "> </ div >
179
+ < script src ="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/prism.js "> </ script >
180
+ </ body >
181
+
182
+ </ html >
0 commit comments