TiddlyWiki5/plugins/tiddlywiki/multiwikiserver/templates/get-index.tid

title: $:/plugins/tiddlywiki/multiwikiserver/templates/get-index


\function .hide.system()
[<show-system>match[on]]
[all[]!prefix[$:/]]
\end

\procedure bagPill(element-tag:"span",is-topmost:"yes")
	\whitespace trim
	<$genesis $type=<<element-tag>> class={{{ mws-bag-pill [<is-topmost>match[yes]then[mws-bag-pill-topmost]] +[join[ ]] }}}>
		<a class="mws-bag-pill-link" href=`/bags/${ [<bag-name>encodeuricomponent[]] }$` rel="noopener noreferrer" target="_blank">
			<img
				src=`/bags/${ [<bag-name>encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico?fallback=/.system/missing-favicon.png`
				class="mws-favicon-small"
			/>
			<span class="mws-bag-pill-label">
				<$text text=<<bag-name>>/>
			</span>
		</a>
	</$genesis>
\end

<$tiddler tiddler="$:/plugins/tiddlywiki/multiwikiserver/templates/mws-header">
	<$set name="page-title" value="Wikis Available Here">
		<$transclude/>
	</$set>
</$tiddler>

<ul class="mws-vertical-list">
	<$list filter="[<recipe-list>jsonindexes[]] :sort[<currentTiddler>jsonget[recipe_name]]" variable="recipe-index">
		<li>
			<$let
				recipe-info={{{ [<recipe-list>jsonextract<recipe-index>] }}}
				recipe-name={{{ [<recipe-info>jsonget[recipe_name]] }}}
			>
				<div
					class="mws-wiki-card"
				>
					<div class="mws-wiki-card-image">
						<img
							src=`/recipes/${ [<recipe-name>encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico?fallback=/.system/missing-favicon.png`
							class="mws-favicon"
						/>
					</div>
					<div class="mws-wiki-card-content">
						<div class="mws-wiki-card-header">
							<a
								href=`/wiki/${ [<recipe-name>encodeuricomponent[]] }$`
								rel="noopener noreferrer"
								target="_blank"
							>
								<$text text={{{ [<recipe-info>jsonget[recipe_name]] }}}/>
							</a>
						</div>
						<div class="mws-wiki-card-meta">
							<%if true %>
								<ol class="mws-vertical-list">
									<$list filter="[<recipe-info>jsonget[bag_names]reverse[]] :filter[.hide.system[]]" variable="bag-name" counter="counter">
										<$transclude $variable="bagPill" is-topmost={{{ [<counter-first>match[yes]] }}} element-tag="li"/>
									</$list>
								</ol>
							<%else%>
								(no bags defined)
							<%endif%>
						</div>
						<div class="mws-wiki-card-description">
							<$text text={{{ [<recipe-info>jsonget[description]] }}}/>
						</div>
					</div>
				</div>
			</$let>
		</li>
	</$list>
</ul>
<form action="/recipes" method="post" class="mws-form">
	<div class="mws-form-heading">
		Create a new recipe or modify and existing one
	</div>
	<div class="mws-form-fields">
		<div class="mws-form-field">
			<label class="mws-form-field-description">
				Recipe name
			</label>
			<input name="recipe_name" type="text"/>
		</div>
		<div class="mws-form-field">
			<label class="mws-form-field-description">
				Recipe description
			</label>
			<input name="description" type="text"/>
		</div>
		<div class="mws-form-field">
			<label class="mws-form-field-description">
				Bags in recipe (space separated)
			</label>
			<input name="bag_names" type="text"/>
		</div>
	</div>
	<div class="mws-form-buttons">
		<input type="submit" value="Create or Update Recipe" formmethod="post"/>
	</div>
</form>

! Bags

<ul class="mws-vertical-list">
	<$list filter="[<bag-list>jsonindexes[]] :filter[<bag-list>jsonget<currentTiddler>,[bag_name].hide.system[]] :sort[<bag-list>jsonget<currentTiddler>,[bag_name]]" variable="bag-index" counter="counter">
		<li class="mws-wiki-card">
			<$let
				bag-info={{{ [<bag-list>jsonextract<bag-index>] }}}
				bag-name={{{ [<bag-info>jsonget[bag_name]] }}}
			>
				<$transclude $variable="bagPill"/>
				<$text text={{{ [<bag-info>jsonget[description]] }}}/>
			</$let>
		</li>
	</$list>
</ul>

<form action="/bags" method="post" class="mws-form">
	<div class="mws-form-heading">
		Create a new bag or modify and existing one
	</div>
	<div class="mws-form-fields">
		<div class="mws-form-field">
			<label class="mws-form-field-description">
				Bag name
			</label>
			<input name="bag_name" type="text"/>
		</div>
		<div class="mws-form-field">
			<label class="mws-form-field-description">
				Bag description
			</label>
			<input name="description" type="text"/>
		</div>
	</div>
	<div class="mws-form-buttons">
		<input type="submit" value="Create or Update Bag" formmethod="post"/>
	</div>
</form>

! Advanced


<form id="checkboxForm" action="." method="GET">
<%if [<show-system>match[on]] %>
<input type="checkbox" id="chkShowSystem" name="show_system" value="on" checked="checked"/>
<%else%>
<input type="checkbox" id="chkShowSystem" name="show_system" value="on"/>
<%endif%>
<label for="chkShowSystem">Show system bags</label>
<button type="submit">Update</button>
</form>

<style>
.mws-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background-color: #f0f0f0;
	margin-bottom: 20px;
}

.mws-user-info {
	display: flex;
	align-items: center;
}

.mws-logout-form {
  margin-left: 10px;
}

.mws-logout-button {
	padding: 5px 10px;
	background-color: #f44336;
	color: white;
	border: none;
	cursor: pointer;
}

.mws-logout-button:hover {
  background-color: #d32f2f;
}

.mws-admin-dropdown {
	position: relative;
	display: inline-block;
	margin-left: 10px;
}

.mws-admin-dropbtn {
	color: white;
	padding: 5px;
	font-size: 16px;
	border: none;
	cursor: pointer;
}

.mws-admin-dropbtn:hover, .mws-admin-dropbtn:focus {
  cursor: pointer;
	opacity: 0.8;
}

.mws-admin-dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	right: 0;
}

.mws-admin-dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.mws-admin-dropdown-content a:hover {background-color: #ddd;}

.mws-admin-dropdown:hover .mws-admin-dropdown-content {display: block;}

.mws-admin-dropdown:hover {background-color: #2980B9;}
</style>