Stylise example

kyle-ssg · kyle-ssg · commit b4dc2f8e1cdb · 2022-06-27T11:21:02.000+01:00
Signed-off-by: kyle-ssg &lt;kyle@solidstategroup.com&gt;
diff --git a/examples/dynatrace-realtime-user-monitoring/index.html b/examples/dynatrace-realtime-user-monitoring/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Dynatrace Integration</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
     <script type="text/javascript">
         /*
@@ -84,36 +85,37 @@
 </head>
 <body>
 
-<div id="loaded" class="hidden">
-    <div id="logged-out">
-        <button id="js-login">
-            Login
-        </button>
-    </div>
-    <div class="hidden" id="logged-in">
-        <div>
-            <button id="js-toggle-trait">
-                Toggle user trait
-            </button>
-            <button id="js-evaluate-flag">
-                Evaluate Flag
+<div class="container mt-4">
+    <div id="loaded" class="hidden">
+        <div id="logged-out">
+            <button class="btn btn-primary" style="margin-bottom: 10px;"  id="js-login">
+                Login
             </button>
-            <button id="js-evaluate-config">
-                Evaluate Config
+        </div>
+        <div class="hidden" id="logged-in">
+            <div style="display: none">
+                <button id="js-toggle-trait">
+                    Toggle user trait
+                </button>
+                <button id="js-evaluate-flag">
+                    Evaluate Flag
+                </button>
+                <button id="js-evaluate-config">
+                    Evaluate Config
+                </button>
+            </div>
+            <button class="btn btn-danger" style="margin-bottom: 10px;" id="js-logout">
+                Logout
             </button>
-            <div>
-                example_trait: <span id="js-example-trait"></span>
+            <div style="margin-bottom: 20px;">
+                <h3>Favourite colour trait</h3> <strong id="js-example-trait"></strong><br/>
             </div>
         </div>
-        <button id="js-logout">
-            Logout
-        </button>
+        <div id="js-data"></div>
+    </div>
+    <div id="loading">
+        Loading
     </div>
-    <h3>Flagsmith Data</h3>
-    <div id="js-data"></div>
-</div>
-<div id="loading">
-    Loading
 </div>
 <script src="../../flagsmith/index.js"></script>
 <script src="./main.js"></script>
diff --git a/examples/dynatrace-realtime-user-monitoring/main.js b/examples/dynatrace-realtime-user-monitoring/main.js
@@ -1,5 +1,5 @@
 var environmentID = 'QjgYur4LQTwe5HpvbvhpzK'
-var flagsmithIdentity = "flagsmith_sample_user"
+var flagsmithIdentity = "flagsmith_sample_user2"
 
 //Identify the user
 dtrum.identifyUser(flagsmithIdentity)
@@ -50,14 +50,17 @@ flagsmith.init({
         if (flagsmith.identity) {
             $("#logged-in").removeClass("hidden")
             $("#logged-out").addClass("hidden")
-            $("#js-example-trait").text(flagsmith.getTrait("example_trait") + "");
-            if (flagsmith.getSegments()) {
-                $("#js-segments").text(Object.keys(flagsmith.getSegments() ).join(", "));
-            }
+            $("#js-example-trait").text(flagsmith.getTrait("favourite_color") + "");
         } else {
             $("#logged-out").removeClass("hidden")
             $("#logged-in").addClass("hidden")
         }
-        $("#js-data").text(JSON.stringify(flagsmith.getAllFlags(), null, 2));
+        $("#js-data").html(Object.keys(flagsmith.getAllFlags()).map((key)=>{
+            return `<h3>${key}</h3>
+${flagsmith.hasFeature(key)?`<span class="text-success">Enabled</span>`: `<span class="text-danger">Disabled</span>`}
+${flagsmith.getValue(key) ? `<strong><br/>${flagsmith.getValue(key)}</strong><br/>` : ''}
+
+`
+        }).join("<br/>"), null, 2);
     }
 });
