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/[email protected] /themes/prism.css "
id ="
light-theme "
disabled > 20+ < link rel ="
stylesheet "
href ="
https://cdn.jsdelivr.net/npm/[email protected] /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://raw.githubusercontent.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/[email protected] /prism.js "
> </ script > 180+ </ body >
181+
182+ </ html >
0 commit comments