Create twig template for the example and include a form to change loc…

…ation name
defro · Oct 17, 2020 · 164ea9f · 164ea9f
1 parent bcfff96
commit 164ea9f
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 11 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -13,3 +13,7 @@ trim_trailing_whitespace = true
 
 [*.md]
 trim_trailing_whitespace = false
+
+[{*.twig, *.html}]
+trim_trailing_whitespace = false
+indent_size = 2
diff --git a/example/index.php b/example/index.php
@@ -1,19 +1,17 @@
 <?php
 /**
- * Test this example by executing:
- * php -S localhost:2626
- * Open your favorite browser and go to http://localhost:2626/example.php
- * OR
- * Print it on stdout using CLI client:
- * $ docker build -t google-street-view . && \
- *     docker run -it --rm --name google-street-view -v "$PWD":/application google-street-view php example/index.php
+ * Test it with Dockerfile provided:
+ * $ docker run -it --rm --name google-street-view -v "$(pwd)/example":/application/example -v "$(pwd)/src":/application/src -p 8080:80 google-street-view
+ * Open your browser and go to http://localhost:8080/
+ *
+ * Bonus: launch example wth CLI interpreter
+ * $ docker run -it --rm --name google-street-view -v "$(pwd)/example":/application/example -v "$(pwd)/src":/application/src google-street-view php example/index.php
  *
  */
 ini_set('display_errors', '1');
 error_reporting(E_ALL);
 
-$vendorDir = getenv('COMPOSER_VENDOR_DIR') ?: 'vendor';
-require_once __DIR__.'/../'.$vendorDir.'/autoload.php';
+require_once __DIR__.'/../vendor/autoload.php';
 
 /**
  * You can customize this value to test it.
@@ -23,6 +21,12 @@
 $locationName = 'Forbidden City, Beijing, China';
 //$locationName = 'A place which not exists';
 
+if (!empty($_GET)) {
+    $locationName = !empty($_GET['location_name'])
+        ? htmlspecialchars(stripslashes(trim($_GET['location_name'])))
+        : $locationName;
+}
+
 use Defro\Google\StreetView\Api;
 
 if (file_exists(__DIR__.'/.env')) {
@@ -44,7 +48,6 @@
     ->setImageHeight($imageHeight);
 
 $print = [
-    '<h1>Google Street view example</h1>',
     '<h2>Handle location: "'.$locationName.'"</h2>',
 ];
 
@@ -102,7 +105,10 @@
 } else {
     $loader = new \Twig\Loader\FilesystemLoader(__DIR__);
     $twig = new \Twig\Environment($loader);
-    echo $twig->render('index.twig', ['result' => webPrinter($print)]);
+    echo $twig->render('index.twig', [
+        'result' => webPrinter($print),
+        'locationName' => $locationName,
+    ]);
 }
 
 function cliPrinter($print, $indentationLevel = 0)

diff --git a/example/index.twig b/example/index.twig
@@ -0,0 +1,54 @@
+<html>
+<head>
+  <title>Google street view API PHP example</title>
+  <link rel="icon" type="image/png" href="favicon.png"/>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+</head>
+<body>
+<nav class="light-blue lighten-1" role="navigation">
+  <div class="nav-wrapper container">
+    <a id="logo-container" href="#" class="brand-logo">
+      Google street view example
+    </a>
+  </div>
+</nav>
+
+<div class="section no-pad-bot" id="index-banner">
+  <div class="container">
+    <div class="row">
+      <div class="col s12">
+        <ul class="tabs" id="tabs">
+          <li class="tab col s3">
+            <a href="#tab-result">Result</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#tab-form">Test a location</a>
+          </li>
+        </ul>
+      </div>
+      <div id="tab-result" class="col s12">{{ result|raw }}</div>
+      <div id="tab-form" class="col s12">
+        <form class="col s12" action="#" method="get">
+          <div class="row">
+            <div class="input-field col s12">
+              <input placeholder="Forbidden City, Beijing, China" id="location_name" name="location_name" type="text" class="validate" value="{{ locationName }}">
+              <label for="location_name">Location name</label>
+            </div>
+          </div>
+          <div class="center col s12">
+            <button class="btn waves-effect waves-light" type="submit">
+              Search
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+<script type="text/javascript">
+  var instance = M.Tabs.init(document.getElementById('tabs'));
+</script>
+</body>
+</html>