How to use @hyperapp/html - 10 common examples
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 
}
if (refresh) {
view.push(span({class: 'loader'}));
actions.fetchImage(image_id);
}
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')
])actions.fetchImage(image_id);
}
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 () {}
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(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});
}) : null
);
}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});
}) : null
);
}} else if (!image.data || typeof image.data.tags === 'undefined' || image.data.tags === null || !image.data.tags.length) {
view.push(BigError(404, image_id + ' does not exist in this Registry',
a({
class: 'btn btn-link', onclick: function () {
actions.fetchImage(image_id);
}
}, 'Refresh')
));
} else {
// Show it
// This is where shit gets weird. Digest is the same for all tags, but only stored with a tag.
digest = image.data.tags[0].digest;
append_delete_model = delete_enabled && state.confirmDeleteImage === image_id;
view.push(h1({class: 'page-title mb-5'}, [
delete_enabled ? a({
class: 'btn btn-secondary btn-sm ml-2 pull-right', onclick: function () {
actions.updateState({confirmDeleteImage: image_id});
}
}, 'Delete') : null,
image_id
]));
view.push(div(image.data.tags.map(tag => ImageTag(tag, state.status.config))));
}
}
if (refresh) {
view.push(span({class: 'loader'}));
actions.fetchImage(image_id);
}
return div(}
// if image doesn't exist in state: refresh
if (typeof state.images[image_id] === 'undefined' || !state.images[image_id]) {
refresh = true;
} else {
image = state.images[image_id];
// if image does exist, but hasn't been refreshed in < 30 seconds, refresh
if (image.timestamp < (now - 30)) {
refresh = true;
// if image does exist, but has error, show error
} else if (image.err) {
view.push(BigError(image.err.code, image.err.message,
a({
class: 'btn btn-link', onclick: function () {
actions.fetchImage(image_id);
}
}, 'Refresh')
));
// if image does exist, but has no error and no data, 404
} else if (!image.data || typeof image.data.tags === 'undefined' || image.data.tags === null || !image.data.tags.length) {
view.push(BigError(404, image_id + ' does not exist in this Registry',
a({
class: 'btn btn-link', onclick: function () {
actions.fetchImage(image_id);
}
}, 'Refresh')
));
} else {// if image does exist, but has no error and no data, 404
} else if (!image.data || typeof image.data.tags === 'undefined' || image.data.tags === null || !image.data.tags.length) {
view.push(BigError(404, image_id + ' does not exist in this Registry',
a({
class: 'btn btn-link', onclick: function () {
actions.fetchImage(image_id);
}
}, 'Refresh')
));
} else {
// Show it
// This is where shit gets weird. Digest is the same for all tags, but only stored with a tag.
digest = image.data.tags[0].digest;
append_delete_model = delete_enabled && state.confirmDeleteImage === image_id;
view.push(h1({class: 'page-title mb-5'}, [
delete_enabled ? a({
class: 'btn btn-secondary btn-sm ml-2 pull-right', onclick: function () {
actions.updateState({confirmDeleteImage: image_id});
}
}, 'Delete') : null,
image_id
]));
view.push(div(image.data.tags.map(tag => ImageTag(tag, state.status.config))));
}
}
if (refresh) {
view.push(span({class: 'loader'}));
actions.fetchImage(image_id);
}if (refresh) {
view.push(span({class: 'loader'}));
actions.fetchImage(image_id);
}
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')
])
])
),
