github.com/oweisse/u-root@v0.0.0-20181109060735-d005ad25fef1/examples/sos/example_sos.html (about)

     1  <head>
     2    <style>
     3      table {
     4        font-family: arial, sans-serif;
     5        border-collapse: collapse;
     6        width: 100%;
     7      }
     8      td, th {
     9        border: 1px solid #dddddd;
    10        text-align: left;
    11        padding: 8px;
    12      }
    13      input {
    14        font-size: 120%;
    15      }
    16    </style>
    17    <script>
    18      // here we define Javascript functions for sending data back to our Go server, by
    19      // fetching the URL defined by our server's router to invoke the Go function.
    20      // When we are sending data back, we get the value(s) in the text field(s) and
    21      // encode them into JSON, which is sent back to our Go handler.
    22      function sendString() {
    23        ex = document.getElementById("field").value
    24        fetch("http://localhost:{{.Port}}/your_url_here_1", {
    25          method: 'Post',
    26          headers: {
    27            'Accept': 'application/json',
    28            'Content-Type': 'application/json'
    29          },
    30          body: JSON.stringify({
    31            Example: ex
    32          })
    33        })
    34        .then(r => r.json())
    35        .then( s => {
    36          if (s !== null) {
    37            alert(s.Error);
    38            window.location.reload();
    39          }
    40          else {
    41            window.location.reload();
    42          }
    43        })
    44        .catch(err => alert(err))
    45      }
    46      // this function calls the handler without sending anything, so we do not do any
    47      // JSON manipulation.
    48      function sendEmpty() {
    49        fetch("http://localhost:{{.Port}}/your_url_here_2", {
    50          method: 'Post'
    51        })
    52        .then(r => r.json())
    53        .then( s => {
    54          if (s !== null) {
    55            alert(s.Error);
    56            window.location.reload();
    57          }
    58          else {
    59            window.location.reload();
    60          }
    61        })
    62        .catch(err => alert(err))
    63      }
    64    </script>
    65  </head>
    66  <body>
    67    <!--
    68    Inline Javascript doesn't like directly calling the data we passed in, so we copy
    69    it to a local variable. We do not have to do this when we are in the <script> tag.
    70    -->
    71    {{$example := .Example}}
    72    <h1>Example</h1>
    73    <!-- This div contains a link back to the SoS homepage. -->
    74    <div class="banner">
    75        <h1><a href="http://localhost:8000" target="_blank" class="bannerbtn">Service of Services</a></h1>
    76    </div>
    77    <div class="content">
    78      <div class="center">
    79        <h2 class="centernarrow">Example</h2>
    80        <div class="card">
    81          <div class="center">
    82            <!-- we can populate fields with the current settings on load by setting the value. -->
    83            <input type="text" id="field"  class="text" value="{{$example}}">
    84            <!-- we define which functions to run using the onclick tag with buttons. -->
    85            <input type="submit" class="btn" value="Submit" onclick=sendString()>
    86            <input type="submit" class="btn" value="Clear" onclick=sendEmpty()>
    87          </div>
    88        </div>
    89      </div>
    90    </div>
    91  </body>