How to use the @hyperapp/html.p function in @hyperapp/html
To help you get started, we’ve selected a few @hyperapp/html examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jc21 / docker-registry-ui / src / frontend / js / routes / image.js View on Github 
}
return div(
Nav(state.status.config.REGISTRY_STORAGE_DELETE_ENABLED),
div({class: 'my-3 my-md-5'},
div({class: 'container'}, view)
),
// Delete modal
append_delete_model ? Modal(
div({class: 'modal-dialog'},
div({class: 'modal-content'}, [
div({class: 'modal-header text-left'},
h4({class: 'modal-title'}, 'Confirm Delete')
),
div({class: 'modal-body'},
p('Are you sure you want to delete this image and tag' + (image.data.tags.length === 1 ? '' : 's') + '?')
),
div({class: 'modal-footer'}, [
button({
class: 'btn btn-danger',
type: 'button',
onclick: actions.deleteImageClicked,
'data-image_id': image_id,
'data-digest': digest
}, 'Yes I\'m sure'),
button({class: 'btn btn-default', type: 'button', 'data-dismiss': 'modal'}, 'Cancel')
])
])
),
// onclose function
function () {
actions.updateState({confirmDeleteImage: null});export default (state, actions) => params => {
let content = null;
if (!state.repos || !state.repos.length) {
// empty
content = div({class: 'alert alert-success'}, [
h4('Nothing to see here!'),
p('There are no images in this Registry yet.'),
div({class: 'btn-list'},
Link({class: 'btn btn-success', to: '/instructions/pushing'}, 'How to push an image')
)
]);
} else {
content = TableCard([
'Name',
'Tags'
], {
name: {manipulator: Manipulators.imageName()},
tags: {manipulator: Manipulators.joiner(', ')}
}, state.repos);
}
return div(export default (code, message, detail, hide_back_button) =>
div({class: 'container text-center'}, [
div({class: 'display-1 text-muted mb-5'}, [
i({class: 'si si-exclamation'}),
code
]),
h1({class: 'h2 mb-3'}, message),
p({class: 'h4 text-muted font-weight-normal mb-7'}, detail),
hide_back_button ? null : a({class: 'btn btn-primary', href: 'javascript:history.back();'}, [
i({class: 'fe fe-arrow-left mr-2'}),
'Go back'
])
]);div({class: 'card-alert alert alert-secondary mb-0 pull-command'},
'docker pull ' + domain + '/' + tag.image_name + ':' + tag.name
),
div({class: 'card-body'},
div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Docker Version'),
p(tag.info.docker_version)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Size'),
p(total_size ? total_size + ' mb' : 'Unknown')
])
])
)
]);
}} else {
content = TableCard([
'Name',
'Tags'
], {
name: {manipulator: Manipulators.imageName()},
tags: {manipulator: Manipulators.joiner(', ')}
}, state.repos);
}
return div(
Nav(state.status.config.REGISTRY_STORAGE_DELETE_ENABLED),
div({class: 'my-3 my-md-5'},
div({class: 'container'}, content)
),
p({class: 'text-center'},
a({
class: 'btn btn-link text-faded', onclick: function () {
actions.bootstrap();
}
}, 'Refresh')
)
);
}div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Docker Version'),
p(tag.info.docker_version)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Size'),
p(total_size ? total_size + ' mb' : 'Unknown')
])
])
)
]);
}export default (state, actions) => {
if (state.isLoading) {
return span({class: 'loader'});
} else {
if (state.globalError !== null && state.globalError) {
return BigError(state.globalError.code || '500', state.globalError.message,
[
p('There may be a problem communicating with the Registry'),
a({
class: 'btn btn-link', onclick: function () {
actions.bootstrap();
}
}, 'Refresh')
],
true
);
} else {
return div(
Route({path: '/', render: ImagesRoute(state, actions)}),
Route({path: '/image/:imageId', render: ImageRoute(state, actions)}),
Route({path: '/image/:imageDomain/:imageId', render: ImageRoute(state, actions)}),
Route({path: '/instructions/pushing', render: PushingRoute(state, actions)}),
Route({path: '/instructions/pulling', render: PullingRoute(state, actions)}),
Route({path: '/instructions/deleting', render: DeletingRoute(state, actions)})return div({class: 'card tag-card'}, [
div({class: 'card-header'},
h3({class: 'card-title'}, tag.name)
),
div({class: 'card-alert alert alert-secondary mb-0 pull-command'},
'docker pull ' + domain + '/' + tag.image_name + ':' + tag.name
),
div({class: 'card-body'},
div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Docker Version'),
p(tag.info.docker_version)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Size'),
p(total_size ? total_size + ' mb' : 'Unknown')
])
])
)
]);
}}
let domain = config.REGISTRY_DOMAIN || window.location.hostname;
return div({class: 'card tag-card'}, [
div({class: 'card-header'},
h3({class: 'card-title'}, tag.name)
),
div({class: 'card-alert alert alert-secondary mb-0 pull-command'},
'docker pull ' + domain + '/' + tag.image_name + ':' + tag.name
),
div({class: 'card-body'},
div({class: 'row'}, [
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Image ID'),
p(Utils.getShortDigestId(tag.config.digest))
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Author'),
p(tag.info.author)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Docker Version'),
p(tag.info.docker_version)
]),
div({class: 'col-lg-3 col-sm-6'}, [
div({class: 'h6'}, 'Size'),
p(total_size ? total_size + ' mb' : 'Unknown')
])
])
)
]);
