1+ ( function ( ) {
2+ const { useState, useEffect } = React ;
3+
4+ const TrainingPanel = ( ) => {
5+ const [ liveData , setLiveData ] = useState ( null ) ;
6+ const [ onDemandData , setOnDemandData ] = useState ( null ) ;
7+
8+ useEffect ( ( ) => {
9+ const getData = async ( ) => {
10+ fetch (
11+ "https://www.ebi.ac.uk/ebisearch/ws/rest/ebiweb_training_events?format=json&query=domain_source:ebiweb_training_events%20AND%20timeframe:upcoming&start=0&size=2&fieldurl=true&fields=title,description,start_date,end_date,date_time_clean,resource_training_page,type,training_type,url,venue,materials,status,timeframe,resource_training_page,course_image&facetcount=50&sort=start_date&facets=resource_training_page:RNAcentral"
12+ )
13+ . then ( ( Response ) => Response . json ( ) )
14+ . then ( ( findresponse ) => {
15+ setLiveData ( findresponse ) ;
16+ } )
17+ . catch ( ( error ) => {
18+ console . error ( "Error fetching live training data:" , error ) ;
19+ } ) ;
20+
21+ fetch (
22+ "https://www.ebi.ac.uk/ebisearch/ws/rest/ebiweb_training_online?format=json&query=domain_source:ebiweb_training_online&start=0&size=2&fields=title,subtitle,description,type,url&sort=title&facets=resource_training_page:RNAcentral"
23+ )
24+ . then ( ( Response ) => Response . json ( ) )
25+ . then ( ( findresponse ) => {
26+ setOnDemandData ( findresponse ) ;
27+ } )
28+ . catch ( ( error ) => {
29+ console . error ( "Error fetching on-demand training data:" , error ) ;
30+ } ) ;
31+ } ;
32+ getData ( ) ;
33+ } , [ ] ) ;
34+
35+ useEffect ( ( ) => {
36+ // Initialize vfTabs after component renders
37+ setTimeout ( ( ) => {
38+ if ( window . vfTabs ) {
39+ window . vfTabs ( ) ;
40+ }
41+ } , 100 ) ;
42+ } , [ liveData , onDemandData ] ) ;
43+
44+ const formatDesc = ( content ) => {
45+ if ( content ) {
46+ let safeContent = content . replace ( / ( < ( [ ^ > ] + ) > ) / gi, "" ) ;
47+ let slicedContent =
48+ safeContent . length > 200
49+ ? safeContent . slice ( 0 , 200 ) . split ( " " ) . slice ( 0 , - 1 ) . join ( " " ) + "..."
50+ : safeContent ;
51+ return slicedContent ;
52+ }
53+ } ;
54+
55+ return React . createElement (
56+ React . Fragment ,
57+ null ,
58+ React . createElement ( "h2" , {
59+ className : "text-center" ,
60+ style : { marginTop : '10px' , marginBottom : '2px' }
61+ } , "Training" ) ,
62+ React . createElement ( "div" , { className : "row" } ,
63+ React . createElement ( "p" , {
64+ className : "text-center col-md-8 col-md-offset-2"
65+ } , "Learn how to use RNAcentral's features" )
66+ ) ,
67+ React . createElement ( "div" , { style : { backgroundColor : 'white' , padding : '15px' , marginLeft : '-10px' , marginRight : '-10px' , marginBottom : '-10px' , borderTop : '1px solid #e3e3e3' } } ,
68+ React . createElement ( "div" , { className : "vf-tabs" } ,
69+ React . createElement ( "ul" , { className : "vf-tabs__list" , "data-vf-js-tabs" : true } ,
70+ React . createElement ( "li" , { className : "vf-tabs__item" } ,
71+ React . createElement ( "a" , { className : "vf-tabs__link" , href : "#vf-tabs__section--2" } ,
72+ "On-demand training"
73+ )
74+ ) ,
75+ React . createElement ( "li" , { className : "vf-tabs__item" } ,
76+ React . createElement ( "a" , { className : "vf-tabs__link" , href : "#vf-tabs__section--1" } ,
77+ "Live training"
78+ )
79+ )
80+ )
81+ ) ,
82+ React . createElement ( "div" , { className : "vf-tabs-content" , "data-vf-js-tabs-content" : true } ,
83+ React . createElement ( "section" , { className : "vf-tabs__section" , id : "vf-tabs__section--2" } ,
84+ React . createElement ( "div" , { className : "vf-grid vf-grid__col-2" } ,
85+ onDemandData && onDemandData . entries && onDemandData . entries . length > 0
86+ ? onDemandData . entries . map ( ( item , index ) =>
87+ React . createElement ( "div" , {
88+ key : index ,
89+ className : "vf-summary vf-summary--event"
90+ } ,
91+ React . createElement ( "p" , { className : "vf-summary__date" } , item . fields . type ) ,
92+ React . createElement ( "h3" , { className : "vf-summary__title" } ,
93+ React . createElement ( "a" , {
94+ href : item . fields . url ? item . fields . url [ 0 ] : '#' ,
95+ target : "_blank" ,
96+ rel : "noopener noreferrer" ,
97+ className : "vf-summary__link"
98+ } ,
99+ item . fields . title ,
100+ item . fields . subtitle && item . fields . subtitle [ 0 ] && item . fields . subtitle [ 0 ] . length > 0
101+ ? ": " + item . fields . subtitle [ 0 ]
102+ : ""
103+ )
104+ ) ,
105+ React . createElement ( "div" , null ,
106+ React . createElement ( "div" , { className : "vf-summary__text" } ,
107+ formatDesc ( item . fields . description ? item . fields . description [ 0 ] : '' )
108+ )
109+ )
110+ )
111+ )
112+ : React . createElement ( "p" , { className : "text-center" } , "No on-demand training materials available." )
113+ )
114+ ) ,
115+ React . createElement ( "section" , { className : "vf-tabs__section" , id : "vf-tabs__section--1" } ,
116+ React . createElement ( "div" , { className : "vf-grid vf-grid__col-2" } ,
117+ liveData && liveData . entries && liveData . entries . length > 0
118+ ? liveData . entries . map ( ( item , index ) =>
119+ React . createElement ( "div" , {
120+ key : index ,
121+ className : "vf-summary vf-summary--event"
122+ } ,
123+ React . createElement ( "p" , { className : "vf-summary__date" } , item . fields . type ) ,
124+ React . createElement ( "h3" , { className : "vf-summary__title" } ,
125+ React . createElement ( "a" , {
126+ href : item . fields . url ? item . fields . url [ 0 ] : '#' ,
127+ target : "_blank" ,
128+ rel : "noopener noreferrer" ,
129+ className : "vf-summary__link"
130+ } , item . fields . title )
131+ ) ,
132+ React . createElement ( "div" , null ,
133+ React . createElement ( "div" , { className : "vf-summary__text" } ,
134+ formatDesc ( item . fields . description ? item . fields . description [ 0 ] : '' )
135+ ) ,
136+ React . createElement ( "div" , { className : "vf-summary__location" } ,
137+ React . createElement ( "div" , { className : "vf-u-margin__top--400" } ) ,
138+ React . createElement ( "span" , null , item . fields . status ) ,
139+ " | " ,
140+ React . createElement ( "span" , null ,
141+ React . createElement ( "i" , { className : "icon icon-common icon-calendar-alt" } ) ,
142+ " " ,
143+ item . fields . date_time_clean
144+ ) ,
145+ React . createElement ( "span" , null ,
146+ " | " ,
147+ React . createElement ( "i" , { className : "icon icon-common icon-location" } ) ,
148+ " " ,
149+ item . fields . venue === "null" || ! item . fields . venue ? "Online" : item . fields . venue
150+ )
151+ )
152+ )
153+ )
154+ )
155+ : React . createElement ( "p" , { className : "text-center" } , "No upcoming live training events available." )
156+ )
157+ )
158+ )
159+ )
160+ ) ;
161+ } ;
162+
163+ // Wait for DOM to be ready
164+ if ( document . readyState === 'loading' ) {
165+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
166+ const rootElement = document . getElementById ( "training-widget-root" ) ;
167+ if ( rootElement && window . ReactDOM ) {
168+ ReactDOM . render ( React . createElement ( TrainingPanel ) , rootElement ) ;
169+ }
170+ } ) ;
171+ } else {
172+ const rootElement = document . getElementById ( "training-widget-root" ) ;
173+ if ( rootElement && window . ReactDOM ) {
174+ ReactDOM . render ( React . createElement ( TrainingPanel ) , rootElement ) ;
175+ }
176+ }
177+ } ) ( ) ;
0 commit comments