Last active
August 28, 2024 08:16
-
-
Save laymanstake/f65bf8d94fce8db888a95feb2ac26594 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Function New-TabbedHTML { | |
| [CmdletBinding()] | |
| param ( | |
| [Parameter(Mandatory=$true)][ValidateScript({ | |
| ($_ | Get-Member | Where-Object {$_.membertype -eq "NoteProperty"}).count -eq 2 -AND | |
| ($_ | Get-member | Where-Object {$_.membertype -eq "Noteproperty"}).Name -contains "Content" -AND | |
| ($_ | Get-member | Where-Object {$_.membertype -eq "Noteproperty"}).Name -contains "Title" | |
| })][array]$inputArray, | |
| [Parameter(ValueFromPipeline = $true, mandatory = $false)][ValidateSet('horizontal', 'vertical')][String]$Alignment = "vertical", | |
| [Parameter(Mandatory=$true)][string]$title | |
| ) | |
| $hCSS = @" | |
| .tab { | |
| overflow: hidden; | |
| border: 1px solid Aliceblue; | |
| background-color: AliceBlue; | |
| background: linear-gradient(lightblue, blue); | |
| } | |
| .tab button { | |
| background-color: inherit; | |
| float: left; | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| padding: 10px 10px ; | |
| transition: 0.2s; | |
| } | |
| .tab button:hover { | |
| background-color: khaki; | |
| } | |
| .tab button.active { | |
| background-color: seagreen; | |
| } | |
| .tabcontent { | |
| display: none; | |
| padding: 6px 12px; | |
| border: 1px solid lightblue; | |
| border-top: none; | |
| } | |
| <style> | |
| h1 { font-family: Arial, Helvetica, sans-serif; color: navy; font-size: 28px; } | |
| h2 { font-family: Arial, Helvetica, sans-serif; color: midnightblue; font-size: 16px; } | |
| table { font-size: 12px; border: 1px; font-family: Arial, Helvetica, sans-serif; } | |
| td { padding: 4px; margin: 0px; border: 1; } | |
| th { background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; padding: 10px 15px; vertical-align: middle; } | |
| tbody tr:nth-child(even) { background: aliceblue; } | |
| </style> | |
| "@ | |
| $vCSS = @" | |
| .tab { | |
| float: left; | |
| border: 1px solid lightblue; | |
| background-color: AliceBlue; | |
| background: linear-gradient(lightblue, blue); | |
| width: 15%; | |
| height: 1300px; | |
| } | |
| .tab button { | |
| display: block; | |
| background-color: inherit; | |
| color: black; | |
| padding: 22px 16px; | |
| width: 100%; | |
| border: 1px solid lightblue; | |
| outline: none; | |
| text-align: left; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| font-size: 17px; | |
| } | |
| .tab button:hover { | |
| background-color: khaki; | |
| } | |
| .tab button.active { | |
| background-color: seagreen; | |
| } | |
| .tabcontent { | |
| float: left; | |
| padding: 0px 12px; | |
| border: 1px solid lightblue; | |
| width: 85%; | |
| border-left: none; | |
| height: 1300px; | |
| } | |
| <style> | |
| h1 { font-family: Arial, Helvetica, sans-serif; color: navy; font-size: 28px; } | |
| h2 { font-family: Arial, Helvetica, sans-serif; color: midnightblue; font-size: 16px; } | |
| table { font-size: 12px; border: 1px; font-family: Arial, Helvetica, sans-serif; } | |
| td { padding: 4px; margin: 0px; border: 1; } | |
| th { background: #395870; background: linear-gradient(#49708f, #293f50); color: #fff; font-size: 11px; text-transform: uppercase; padding: 10px 15px; vertical-align: middle; } | |
| tbody tr:nth-child(even) { background: aliceblue; } | |
| </style> | |
| "@ | |
| $jScript = @" | |
| function openTab(evt, tabName) { | |
| var i, tabcontent, tablinks; | |
| tabcontent = document.getElementsByClassName("tabcontent"); | |
| for (i = 0; i < tabcontent.length; i++) { | |
| tabcontent[i].style.display = "none"; | |
| } | |
| tablinks = document.getElementsByClassName("tablinks"); | |
| for (i = 0; i < tablinks.length; i++) { | |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); | |
| } | |
| document.getElementById(tabName).style.display = "block"; | |
| evt.currentTarget.className += " active"; | |
| } | |
| document.getElementById("defaultOpen").click(); | |
| "@ | |
| $Content = "<!DOCTYPE html><html><head>"+ "<title>$title</title>" +"<meta name='viewport' content='width=device-width, initial-scale=1'><style>" + "`n" + "* {box-sizing: border-box}" + "`n" + "body {font-family: Arial; background-color: lightblue;}" | |
| if($Alignment -eq 'horizontal'){ | |
| $Content += "`n" + $hCSS + "`n" + "</style></head><body>" | |
| } else { | |
| $Content += "`n" + $vCSS + "`n" + "</style></head><body>" | |
| } | |
| $Content += "`n" + "<div class='tab'>" + "`n" | |
| $i = 0 | |
| ForEach($row in $inputArray){ | |
| if($i -eq 0){ $Content += "<button class='tablinks' onclick=`"openTab(event, '$($row.Title)')`" id='defaultOpen' >$($row.Title)</button>" + "`n" } | |
| else { $Content += "<button class='tablinks' onclick=`"openTab(event, '$($row.Title)')`">$($row.Title)</button>" + "`n" } | |
| $i++ | |
| } | |
| $Content += "</div>" + "`n" | |
| ForEach($row in $inputArray){ | |
| $Content += "<div id='$($row.Title)' class='tabcontent'><p>$($row.Content)</p></div>" + "`n" | |
| } | |
| $Content += "<script>`n" + $jScript + "`n</script></body></html>" | |
| Return $Content | |
| } | |
| New-TabbedHTML -inputArray (get-service | Select-Object @{l="Title";e={$_.DisplayName}},@{l="Content";e={$_.status}} -first 5) -title "Random" -Alignment horizontal | set-content c:\temp\new.htm | |
| invoke-item c:\temp\new.htm |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment