Name: cockpit/lib/wfadaptor-doc/demo2.html 
1:
<!--
2:
  This file is part of CPEE.
3:
 
4:
  CPEE is free software: you can redistribute it and/or modify it under the terms
5:
  of the GNU General Public License as published by the Free Software Foundation,
6:
  either version 3 of the License, or (at your option) any later version.
7:
 
8:
  CPEE is distributed in the hope that it will be useful, but WITHOUT ANY
9:
  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
10:
  PARTICULAR PURPOSE.  See the GNU General Public License for more details.
11:
 
12:
  You should have received a copy of the GNU General Public License along with
13:
  CPEE (file COPYING in the main directory).  If not, see
14:
  <http://www.gnu.org/licenses/>.
15:
-->
16:
 
17:
<html>
18:
  <head>
19:
    <title>WfAdaptor Demo</title>
20:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
21:
    <script type="text/javascript" src="../jquery.min.js"></script>
22:
    <script type="text/javascript" src="../jquery.svgdom.js"></script>
23:
    <script type="text/javascript" src="../underscore.min.js"></script>
24:
    <script type="text/javascript" src="../contextmenu.js"></script>
25:
    <script type="text/javascript" src="../wfadaptor.js"></script>
26:
    <script type="text/javascript" src="../../js/wfadaptor.cpee.js"></script>
27:
    <link rel="stylesheet" href="../wfadaptor.css" type="text/css"/>
28:
    <link rel="stylesheet" href="../contextmenu.css" type="text/css"/>
29:
    <script type="text/javascript">
30:
      var adaptor = null;
31:
      function click_update_graph() {
32:
        console.log("Demo: Graph Update");
33:
        var then = new Date();
34:
        adaptor.set_description($('#description').val());
35:
        $('#t_new').text((new Date()).getTime() - then.getTime() + 'ms');
36:
      }
37:
      function update_event() {
38:
        console.log("Demo: update notification");
39:
        $('#description').val(adaptor.get_description);
40:
 
41:
      }
42:
    </script>
43:
  </head>
44:
  <body>
45:
    <table style="background: ThreeDShadow; width: 100%; height: 100%;" border="0">
46:
      <tr>
47:
        <td style="text-align:center; vertical-align:middle"><button type="button" onclick="click_update_graph();">Update Graph >>> </button></td>
48:
        <td style="text-align:center; vertical-align:middle" colspan="2"><b><font size="+2">Workflow Graph</font></b></td>
49:
      </tr>
50:
      <tr height="95%">
51:
        <td width="40%" style="vertical-align:middle; text-align:center"><!-- {{{ -->
52:
          <textarea style="width:98%;height:98%" id="description">
53:
<description xmlns="http://cpee.org/ns/description/1.0">
54:
  <call/>
55:
  <choose>
56:
    <alternative>
57:
      <call/>
58:
    </alternative>
59:
    <alternative>
60:
      <call/>
61:
    </alternative>
62:
  </choose>
63:
</description>
64:
          </textarea>
65:
        </td><!-- }}} -->
66:
        <td style="vertical-align: top"><!-- {{{ -->
67:
          <h3>New Graph Version -> Built-Time:<span id="t_new">00</span></h3>
68:
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="600" width="300" xmlns:xlink="http://www.w3.org/1999/xlink" id="drawing_area">
69:
          </svg>
70:
        </td><!-- }}} -->
71:
      </tr>
72:
    </table>
73:
    <script type="text/javascript">
74:
      var then = new Date();
75:
      adaptor = new WfAdaptor();
76:
      create_cpee_elements(adaptor);
77:
      adaptor.set_svg_container($('#drawing_area'));
78:
      adaptor.set_description($('#description').val(), true);
79:
      $('#t_new').text((new Date()).getTime() - then.getTime() + 'ms');
80:
      adaptor.notify = update_event;
81:
      //console.log(adaptor.get_description());
82:
    </script>
83:
  </body>
84:
</html>