Skip to content

Commit d9a0671

Browse files
BadgeratiBadgerati
authored
Merge pull request #180 from Badgerati/develop
v0.6.0
2 parents 5fe11ea + 71d14aa commit d9a0671

File tree

129 files changed

+3465
-577
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+3465
-577
lines changed

‎docs/Getting-Started/Migrating/05-to-06.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# From v0.5 to v0.6
2+
3+
This is a brief guide on the breaking changes introduced into v0.6 from v0.5.
4+
5+
## Select
6+
7+
The `-NoChooseOption` and `-ChooseOptionValue` parameters on `New-PodeWebSelect` have been removed. The default "choose an option" option has also been removed.
8+
9+
If you want to have a first option of "choose an option", this can be defined as the first option in the `-Options` array:
10+
11+
```powershell
12+
New-PodeWebSelect -Name 'Role' -Options @('Choose...', 'User', 'Admin', 'Operations')
13+
```

‎docs/Tutorials/Basics.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ Once the templates are enabled, you can start to add some pages! You can find mo
5858
* Login
5959
* Webpage
6060

61-
To just add a new page, you use [`Add-PodeWebPage`](../../Functions/Pages/Add-PodeWebPage), supplying the `-Name` of the page and a `-ScriptBlock` for defining the layouts/elements on the page:
61+
To just add a new page, you use [`Add-PodeWebPage`](../../Functions/Pages/Add-PodeWebPage), supplying the `-Name` of the page and a `-ScriptBlock` for defining the layout/element components on the page:
6262

6363
```powershell
6464
Add-PodeWebPage -Name 'Services' -Icon 'Settings' -ScriptBlock {
@@ -79,12 +79,18 @@ The above would render a new page with a table, showing all the services on the
7979

8080
### Sidebar
8181

82-
Pages added to your site will appear in the sidebar on the left of your pages. The sidebar has a filter box at the top by default, but this can be hidden via `-NoPageFilter`:
82+
Pages added to your site will appear in the sidebar on the left of your pages. The sidebar has a filter box at the top by default, but this can be removed via `-NoPageFilter`:
8383

8484
```powershell
8585
Use-PodeWebTemplates -Title 'Example' -Theme Dark -NoPageFilter
8686
```
8787

88+
You can also force the sidebar to be hidden by default via `-HideSidebar`:
89+
90+
```powershell
91+
Use-PodeWebTemplates -Title 'Example' -Theme Dark -HideSidebar
92+
```
93+
8894
## Custom Scripts/Styles
8995

9096
You can reference custom JavaScript and CSS files to use via [`Import-PodeWebJavaScript`](../../Functions/Utilities/Import-PodeWebJavaScript) and [`Import-PodeWebStylesheet`](../../Functions/Utilities/Import-PodeWebStylesheet). Both take a relative/literal `-Url` to the file.

‎docs/Tutorials/ClassAndStyles.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Classes and Styles
2+
3+
Nearly every component in Pode.Web has a `-CssClass` and a `-CssStyle` parameter. These parameters allow you to add custom classes/styles onto the components, so you can control their look and functionality.
4+
5+
## Classes
6+
7+
The `-CssClass` parameter accepts an array of strings, which are set on the `class` property on the parent element of approparite component. The classes by themselves don't do anything, but you can use them to build custom CSS files and import them via [`Import-PodeWebStylesheet`](../../Functions/Utilities/Import-PodeWebStylesheet); you can also use the custom classes as references in custom JavaScript files, and import these via [`Import-PodeWebJavaScript`](../../Functions/Utilities/Import-PodeWebJavaScript).
8+
9+
For example, the following would apply the `my-custom-textbox` class to a textbox:
10+
11+
```powershell
12+
New-PodeWebTextbox -Name 'Message' -CssClass 'my-custom-textbox'
13+
```
14+
15+
Then you could create some `/public/my-styles.css` file with the following, to set the textbox's text colour to purple:
16+
17+
```css
18+
.my-custom-textbox {
19+
color: purple
20+
}
21+
```
22+
23+
and import it via: `Import-PodeWebStylesheet -Url '/my-styles.css'`.
24+
25+
or, you can create some JavaScript file at `/public/my-scritps.js` with an event to write to console on keyup. jQuery works here, as Pode.Web uses jQuery. Also, we have to reference the class then the input control, as the class is at the paraent level of the textbox element; this allows for more fine grained control of a component as a whole - such as a textbox's labels, divs, spans, etc.
26+
27+
```js
28+
$('.my-custom-textbox input').off('keyup').on('keyup', (e) => {
29+
console.log($(e.target).val());
30+
})
31+
```
32+
33+
and import it via: `Import-PodeWebJavaScript -Url '/my-scripts.js'`.
34+
35+
You can add/remove classes on components using the [Class output actions](../Outputs/Components#classes). (This will add classes onto the component itself, not the parent).
36+
37+
## Styles
38+
39+
The `-CssStyle` parameter accepts a hashtable where the key is the name of a CSS property, with an appropriate value for that property. These styles are applied directly onto the main component.
40+
41+
For example, the following would display a paragraph with yellow text:
42+
43+
```powershell
44+
New-PodeWebParagraph -CssStyle @{ Color = 'Yellow' } -Elements @(
45+
New-PodeWebText -Value 'And then here is some more text, that also includes a '
46+
New-PodeWebLink -Value 'link' -Source 'https://google.com'
47+
New-PodeWebText -Value ' that takes you to Google'
48+
)
49+
```
50+
51+
You can set/remove CSS style properties on components using the [Style output actions](../Outputs/Components#styles).

‎docs/Tutorials/Elements/Alert.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Alert
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
An alert is a colour block containing information text; alerts can for warning, errors, tips, etcs. To add an alert you use [`New-PodeWebAlert`](../../../Functions/Elements/New-PodeWebAlert), and supply either a `-Value` or `-Content`:
48

59
```powershell

‎docs/Tutorials/Elements/Badge.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Badge
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
A Badge is just normal text, but has a styled/coloured background. You can add a badge to your page using [`New-PodeWebBadge`](../../../Functions/Elements/New-PodeWebBadge):
48

59
```powershell

‎docs/Tutorials/Elements/Button.md

+16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Button
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
To display a button on your page you use [`New-PodeWebButton`](../../../Functions/Elements/New-PodeWebButton); a button can either be dynamic and run custom logic via a `-ScriptBlock`, or it can redirect a user to a `-Url`.
48

59
## Dynamic
@@ -22,6 +26,18 @@ Which looks like below:
2226

2327
![button_dynamic](../../../images/button_dynamic.png)
2428

29+
You can pass values to the scriptblock by using the `-ArgumentList` parameter. This accepts an array of values/objects, and they are supplied as parameters to the scriptblock:
30+
31+
```powershell
32+
New-PodeWebButton -Name 'Click Me' -ArgumentList 'Value1', 2, $false -ScriptBlock {
33+
param($value1, $value2, $value3)
34+
35+
# $value1 = 'Value1'
36+
# $value2 = 2
37+
# $value3 = $false
38+
}
39+
```
40+
2541
## URL
2642

2743
To have a button that simply redirects to another URL, all you have to do is supply `-Url`:

‎docs/Tutorials/Elements/Charts.md

+33
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Charts
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
You can display data rendered as a chart by using [`New-PodeWebChart`](../../../Functions/Elements/New-PodeWebChart), and the following chart types are supported:
48

59
* Line (default)
@@ -13,6 +17,18 @@ A chart gets its data from a supplied `-ScriptBlock`, more information below, an
1317

1418
To supply data to be rendered on a chart, you have to supply a `-ScritpBlock` which returns the appropriate data in the correct format; fortunately there's [`ConvertTo-PodeWebChartData`](../../../Functions/Outputs/ConvertTo-PodeWebChartData) to help with this format.
1519

20+
You can pass values to the scriptblock by using the `-ArgumentList` parameter. This accepts an array of values/objects, and they are supplied as parameters to the scriptblock:
21+
22+
```powershell
23+
New-PodeWebChart -Name 'Example Chart' -Type Line -ArgumentList 'Value1', 2, $false -ScriptBlock {
24+
param($value1, $value2, $value3)
25+
26+
# $value1 = 'Value1'
27+
# $value2 = 2
28+
# $value3 = $false
29+
}
30+
```
31+
1632
### Raw
1733

1834
Before showing the ConvertTo function, the data format needed is as follows: the returned value has be an array of hashtables, with each hashtable requires a `Key` property, and a `Values` property that's an array of further hashtables. The `Key` is the value used on the X-axis, and the `Values` is an array of data points used on the Y-axis. The `Values` hashtables also has to contain a `Key` and a `Value` property - the `Key` here is the dataset group name, and the `Value` is the value on the Y-axis.
@@ -71,6 +87,23 @@ which renders a chart that looks like below:
7187

7288
![chart_bar_process](../../../images/chart_bar_process.png)
7389

90+
## Colours
91+
92+
A chart has 15 default colours that they can be rendered using. These colours can be customised if required, by suppling an array of hex colour codes to the `-Colours` parameter.
93+
94+
For example, to render the below bar chart with reg/green bars, you could use:
95+
96+
```powershell
97+
New-PodeWebContainer -Content @(
98+
New-PodeWebChart -Name 'Top Processes' -Type Bar -AutoRefresh -Colours '#ff0000', '#00ff00' -ScriptBlock {
99+
Get-Process |
100+
Sort-Object -Property CPU -Descending |
101+
Select-Object -First 10 |
102+
ConvertTo-PodeWebChartData -LabelProperty ProcessName -DatasetProperty CPU, Handles
103+
}
104+
)
105+
```
106+
74107
## Append
75108

76109
Now let's say we want `-AutoRefresh` a chart every minute, and we want it to display the current CPU usage, but only for the last 15 minutes. To do this, you have to supply `-Append` and any data returned from the `-ScriptBlock` will be appended to the chart instead. To restrict the data points to 15 minutes, we can supply `-MaxItems 15`.

‎docs/Tutorials/Elements/Checkbox.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Checkbox
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
The Checkbox element is a form input element, and can be added using [`New-PodeWebCheckbox`](../../../Functions/Elements/New-PodeWebCheckbox). This will add a checkbox to your form, and you can render with checkbox as a switch using `-AsSwitch`:
48

59
```powershell
@@ -35,3 +39,7 @@ New-PodeWebCard -Content @(
3539
Which looks like below:
3640

3741
![checkbox_multi](../../../images/checkbox_multi.png)
42+
43+
## Inline
44+
45+
You can render this element inline with other non-form elements by using the `-NoForm` switch. This will remove the form layout, and render the element more cleanly when used outside of a form.

‎docs/Tutorials/Elements/Code.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Code
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
The code element will render pre-formatted text as `<code>value</code>`. To create a code element you use [`New-PodeWebCode`](../../../Functions/Elements/New-PodeWebCode):
48

59
```powershell

‎docs/Tutorials/Elements/CodeBlock.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Code Block
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
The code block element will render pre-formatted text as `<pre>value</pre>`. To create a code block element you use [`New-PodeWebCodeBlock`](../../../Functions/Elements/New-PodeWebCodeBlock), and you can specify the highlighting language via `-Language` - the default is plain text.
48

59
```powershell

‎docs/Tutorials/Elements/CodeEditor.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Code Editor
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
The code editor, which is done using MicroSoft's Monaco Editor, is currently still a WIP but functional. You can add a code editor to your page via [`New-PodeWebCodeEditor`](../../../Functions/Elements/New-PodeWebCodeEditor), and specify the language is editor is for via `-Language`.
48

59
To display the editor with some initial content you can supply `-Value`:

‎docs/Tutorials/Elements/CommentBlock.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Comment Block
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
A Comment Block lets you display messages/comments on your page, showing a user's name, message and an icon/avatar. You can add comment blocks using [`New-PodeWebComment`](../../../Functions/Elements/New-PodeWebComment):
48

59
```powershell

‎docs/Tutorials/Elements/Credentials.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Credentials
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
The Credentials element is a form input element, and can be added using [`New-PodeWebCredential`](../../../Functions/Elements/New-PodeWebCredential). This will automatically add a username and password input fields to your form:
48

59
```powershell

‎docs/Tutorials/Elements/DateTime.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# DateTime
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
The DateTime element is a form input element, and can be added using [`New-PodeWebDateTime`](../../../Functions/Elements/New-PodeWebDateTime). This will automatically add a date and time input fields to your form:
48

59
```powershell

‎docs/Tutorials/Elements/FileStream.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# File Stream
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
A file stream element is a readonly textarea that will stream the contents of a file from the server - usually a text/log file from the `/public` directory. To add a file streaming element to your page you can use [`New-PodeWebFileStream`](../../../Functions/Elements/New-PodeWebFileStream).
48

59
The simplest file stream just needs a `-Url` being supplied; this URL should be a relative/literal URL path to a static text file.

‎docs/Tutorials/Elements/FileUpload.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# File Upload
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
The File Upload element is a form input element, and can be created using [`New-PodeWebFileUpload`](../../../Functions/Elements/New-PodeWebFileUpload). It allows users to upload files from your page forms:
48

59
```powershell
@@ -15,3 +19,7 @@ New-PodeWebCard -Content @(
1519
Which looks like below:
1620

1721
![file_upload](../../../images/file_upload.png)
22+
23+
## Inline
24+
25+
You can render this element inline with other non-form elements by using the `-NoForm` switch. This will remove the form layout, and render the element more cleanly when used outside of a form.

‎docs/Tutorials/Elements/Form.md

+16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Form
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
A form is kind of like a layout, but is an element that contains other elements. It automatically wraps the `-Content` as a `<form>` and adds a submit button to the bottom. When clicked, the form is serialised and sent to the `-ScriptBlock`. To add a form to you page use [`New-PodeWebForm`](../../../Functions/Elements/New-PodeWebForm) along with other form elements:
48

59
```powershell
@@ -27,6 +31,18 @@ Which looks like below:
2731

2832
![form](../../../images/form.png)
2933

34+
You can pass values to the scriptblock by using the `-ArgumentList` parameter. This accepts an array of values/objects, and they are supplied as parameters to the scriptblock:
35+
36+
```powershell
37+
New-PodeWebForm -Name 'Example' -ArgumentList 'Value1', 2, $false -ScriptBlock {
38+
param($value1, $value2, $value3)
39+
40+
# $value1 = 'Value1'
41+
# $value2 = 2
42+
# $value3 = $false
43+
} -Content @()
44+
```
45+
3046
## Elements
3147

3248
The available form elements in Pode.Web are:

‎docs/Tutorials/Elements/Header.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Header
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
You can render header titles to your page by using [`New-PodeWebHeader`](../../../Functions/Elements/New-PodeWebHeader). This will show a title in various header sizes (`h1` - `h6`):
48

59
```powershell

‎docs/Tutorials/Elements/Hidden.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Hidden
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
The Hidden element is a form input element, and can be added using [`New-PodeWebHidden`](../../../Functions/Elements/New-PodeWebHidden). It allows you to add hidden values/elements to your forms:
48

59
```powershell

‎docs/Tutorials/Elements/IFrame.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# iFrame
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
The iFrame element lets you embed other websites into your pages via [`New-PodeWebIFrame`](../../../Functions/Elements/New-PodeWebIFrame), and you just need to supply the `-Url` to embed:
48

59
```powershell

‎docs/Tutorials/Elements/Icon.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Icon
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
The icon element will render a [Material Design Icon](https://materialdesignicons.com) to your page. To create an icon element you use [`New-PodeWebIcon`](../../../Functions/Elements/New-PodeWebIcon), and supply the name of a Material Design Icon using `-Name`; you can also change the icon colour via `-Colour` which can be a known name (red/green/etc) or a hex value (#333333).
48

59
```powershell

‎docs/Tutorials/Elements/Image.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Image
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | Yes |
6+
37
This will render an image onto your page, using [`New-PodeWebImage`](../../../Functions/Elements/New-PodeWebImage). You need to supply a `-Source` URL to the image you wish to display:
48

59
```powershell

‎docs/Tutorials/Elements/Line.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Line
22

3+
| Support | |
4+
| ------- |-|
5+
| Events | No |
6+
37
This will render a line (`<hr>`) to your page, using [`New-PodeWebLine`](../../../Functions/Elements/New-PodeWebLine):
48

59
```powershell

0 commit comments

Comments
 (0)